🍎

Next.js v13のApp Directoryを使って技術メモ投稿サービスを作った話

2023/03/29に公開

Next.js

こんにちはmofmofでエンジニアをしているshwldです。

個人開発でこちらのアプリを作りました。
この記事では、利用技術と、選定の理由、使ってみてどうだったかを書いていきます。

簡単なサービスの紹介

REVELUP.devはTwitterのような気軽さで技術アウトプットメモを投稿できるサービスです。
フロー情報を前提としているため、正確性などを気にせず気軽に投稿しながら、本番アウトプットの練習ができる場を目指します。

詳しくはこちらを御覧ください

構成要素

Tauri

選定の理由

Rustを書いてみたかった
Electronよりもダウンロードサイズが少なく済む
モバイル、Desktop両方行ける物を探していた

Rustに触れたいけど言語自体を学ぶよりもとりあえず動かしてみたい。というものぐさな理由から選定しています。
基本的にはViewのコードをReactで書くのがメインの利用ではありますが、デスクトップアプリ特有のコードも書きたかったので、ちょうどよくRustにふれることができました。

Windows版はMicrosoft Storeからリリースしており、手順についての記事も書きました。

Next.js (App Directory)

Next.jsのv13から新しく導入されたApp Directory(beta) を利用しています。

選定の理由
App Directoryは大きく変わるということで、このタイミングで新規開発するのに旧来のpagesを選択するかどうか迷いました。
どちらにしろアップデートするなら、痛みの少ない（と思われる）v13 Betaを選択しました。

使ってみてNext.jsはv13で大きく変わるのと、変わる方向がこの先のWeb開発の方向性にも影響しそうだと感じたため、早めにキャッチアップして良かったと思っています。

Betaなこともあり、開発環境では結構謎に落ちたり不安定さが見られます。

自分は今回GraphQLバックエンドを採用していますが、クライアントからのfetchはfetch もしくはgraphql-requestのみを使って自前実装しています。

クライアントフェッチで自前実装した内容は以下です。

hoge.graphqlファイルを置くと、同じ場所にhoge.generated.tsを作ってくれる
ファイルには、fetchをクエリのインタフェースを型付で定義してくれるだけのラッパーが生成される
2.の専用fetcherをサーバーコンポーネントから呼び出して使います

自前実装した理由は各種クライアントが未対応だったのもありますが、App Directoryを使ってみて、あまり必要ないと感じたからでもあります。
たまにサーバーで取得したデータをグローバルなクライアントキャッシュとして引き継いでほしいときはあり、そういうケースはクライアントキャッシュを使わない代替手段でお茶を濁しています。そこがいい感じに解決され、あとはsubscription使えたら満足しそうです。
大仰なクライアントは不要で、App Directoryのレールに極力乗っかるのがよいのではと現状は思ってます。

実装としてはGraphQL Code Generatorでカスタムプラグインを作って自前クライアントを使うfetcherを生成しています。
カスタムプラグインを変えることで、生成されるfetcherをいじれば移行が簡単になるかなという希望を持っていますが、うまく移行できるかはわかりません。

App Directory良いと思うポイント

App Directoryではクライアントとサーバーコンポーネントが強制的にに分けられます（useStateなどを使いたければ 'use client'指定が必須となる)

これによってGraphQLのフラグメントコロケーションが半強制され、強制ギプスをつけてる感じがあります。
appディレクトリ配下はbulletproof-react のようにfeatureベースにツリー構造で依存を切っていく感じを体験でき、良い開発レールだと思います。
テストファイルや関連ファイルのコロケーションにも貢献していて良く出来てるなぁという感想。