Next.jsメモ
RerrahTypeScriptのNext.jsプロジェクトのセットアップを試してみる．
- パッケージマネージャー: yarn
- Node.jsバージョン管理: Volta
- リンター: Biome
- フォーマッター: Biome，EditorConfig
Rerrahプロジェクトを作成する．
yarn create next-app --typescript --use-yarn
対話型プロンプトでプロジェクト設定を行う．
- プロジェクト名: 任意の名前
- ESListを使うか: Biomeを使うので"No"
- Tailwind CSSを使うか: コンポーネントを作りこみたいなら"Yes"，MUIを使うならemotionがあるので"No"
- srcフォルダを作るか: App Routerでやるので"No"
- App Routerを使うか: "Yes"
- (Next.js 15から) Turbopackを使うか: "Yes"か？
-
@/*以外のimportエイリアスを使うか: "No"
Rerrahそのままだとyarn pnpになるので，いったんyarn.lockと.yarnフォルダーを削除してから.yarnrc.ymlを作ってパッケージをインストールしなおす．
echo "nodeLinker: node-modules" > .yarnrc.yml
yarn install
先に.yarnrc.ymlを作っておくのもアリ．
RerrahBiomeの設定もReactプロジェクトの時に作ったものをそのまま持ってくる．
biomeも入れておく．
yarn add -E -D @biomejs/biome
package.jsonのscriptsも修正する．
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
- "lint": "next lint"
+ "lint": "biome list --apply ./app",
+ "format": "biome format ./app --write",
+ "check": "biome check --apply ./app"
},
Turbopack
Next.js 15からTurbopackを使うか選べるようになった．
Turbopackはバンドラー．Webpackの代替を目指してVercelが開発している．
速いらしいがViteともあまり変わらないんだとか．
調べた感じ，Reactプロジェクトでバンドラーツールとして使いたいならViteの方が勝手が良さそう．Next.jsを採用するときはTurbopackを使うのが良さそう．
Rerrahテレメトリーをオフ
Next.jsはデフォルトでテレメトリー機能が有効になっている．
気持ち悪いのでオフにする．
yarn next telemetry disable
Server/Client Component
App Routerを使ってSSRの実装していくときは，基本的にReact Server Componentでよい．
Server Component (SC)
サーバー側でレンダリングを行う．クライアント側にはHTMLになった状態で返されるため，ページの大まかなレイアウトなど静的なものはこちらで実装する．
asyncコンポーネントを利用できるので，useEffectなどで行っていた非同期処理をこちらの内部の処理として実装できる．
Next.jsではコンポーネントを基本的にSCとして扱う．
Client Component (CC)
クライアント側でレンダリングを行う．イベント処理や状態管理はクライアント側で処理するのでこちらを使う．
RerrahSCとCCではprops.childrenで渡されるデータの形式が異なる．そのためサーバーサイドとクライアントサイドの描画単位の境界となるコンポーネントの定義時には，コンポーネント定義ファイルの先頭に"use client";の宣言が必要となる．
RerrahSCとCCの見分け方は，そのコンポーネントがクライアント境界 ("use client";)の前か後のどちらに定義されているかで判断する．
- 境界より上の階層: SC（Next.jsではデフォルトがSSRなため）
- 境界より下の階層: CC
Rerrahlayouts.tsxなどの特殊なページのコンポーネントは基本的にSCでOKだが，error.tsxはクライアントサイドのエラーも扱うためCCとして宣言する．
RerrahAPIサーバー
Next.jsでもAPIを実装できる．
RerrahSSR, SSG/ISR
App Routerは通常SSRなので，リクエストがあるたびにレンダリングが行われる．このためSC内でデータフェッチ処理を書いている場合は，リクエストごとにフェッチされる．
SSGビルド設定にしていると，ビルド時にデータフェッチをしてその時点のデータをもとに静的サイトを生成する．そのためデータの動的変更に対応できない．
この処理はgenerateStaticParams関数内で行う．
ISRビルド設定にしていると，一定期間でバックグラウンドでSSGを行い，都度レンダリング結果を更新する．
Rerrahメタデータ
Next.jsでメタデータを設定するには，layout.tsxかpage.tsxにmetadataオブジェクトを定数で定義しexportしておく．
ダイナミックルーティングによって生成されるページのメタデータの設定にはgenerateMetadataを使う．
RerrahフォームとServer Action
Reactにはフォーム送信時のアクションとその時のフォームの状態をuseFormStateフックで管理できる．
このときのアクションをServer Actionとして定義すると，サーバー側でアクションを実行できるようになる．
つまり，通常のアクションであれば，クライアントからサーバーサイドのAPIを叩き，そのAPIからデータベースなどにアクセスする必要があったが，Server Actionの場合はそのアクションの中から直接データベースにアクセスするような記述ができる．