Next.jsをv13にアップデートした所感
このサイトで使用している Next.js を v13 にアップデートしました。
アップデートした当初、意外とややこしいのかなーと思いつつ試行錯誤してみたのですが、意外とすんなりいったので拍子抜けしつつ。
何点か不具合っぽい挙動も見つかっているので、備忘録がてら。
まず困ったら
とにもかくにもまずは Next.js の公式ドキュメントを読みましょう。
v13 については Beta 版のドキュメントにまとめてあるので、既存の公式ドキュメントを読んでもダメなので注意が必要です。
ドキュメント自体はめちゃくちゃシンプルかつわかりやすくまとまっているので、読みやすくて良い感じです。
Context が使えない、useState が使えない、useEffect が使えない、etc…
コンポーネントを Client Components にしましょう。
"use client";
デフォルトのコンポーネントは Server Components となっており、クライアントサイドでのみ実行される処理などがコンポーネント内に定義されていません。
bundle サイズを小さくすることなどが目的のようですが、おそらく 1 番最初に引っかかるポイントだと思います。
ただしコンポーネントを Client Components にした場合、サーバーサイドでのみ実行可能な処理（fs など）は実行できなくなるため、注意が必要です。
その際はコンポーネントの分割などを行い対応するようにしましょう。
app 以下に切れるファイルがナゾ
app 以下で扱われる特殊なファイルは以下のとおりです。
上記以外のファイルについては特別なファイルとして扱われないため、CSS ファイルやフォントファイルなど、何を配置しても OK みたいです。
今までの pages 以下は、配置したファイルすべてがルーティングに絡む仕様であったため、しぶしぶグローバルに配置せざるを得ないケースがちょくちょく発生していましたが。
今回の仕様変更によりグッとカプセル化が容易になり、保守性が上がったのは個人的にとても好印象でした。
少しだけ補足を書いておこうと思います。
RootLayout に _app と _document が統合された
app 直下の layout コンポーネントは RootLayout 扱いとなり、少し扱いが特殊で、今まで _app や _document に実装していた内容がここへ詰め込まれるようになりました。
したがって必然的に RootLayout は膨らむってことですね。
head はファーストビューでのみ読み込まれる
next-seo などを使用して head 内を書き換えているケースが多いと思うのですが。
今までは head 内の記述も page components に行っていましたが、それを分離できるようになりました。
ただし head へのアクセスはファーストビューのタイミングのみ っぽいので、ページ遷移時に title などが書き換わらない仕様が発生しているようです。
後々対応されるか微妙なラインなので、結局 page 側で title などを書き換える処理が必要という、なんじゃそら。
Api Routes は pages 以下のまま動かさない
Api Routes の扱いについてはまだ議論中らしく、app を切ったとしても pages 以下に残しておきましょう。
その他、よくわかっていないこと
いくつか引っかかっているポイントもあるので、書いておこうと思います。
ページ遷移時、スクロール位置の復元が怪しい
v12 では next.config.js で scrollRestoration を設定するとスクロール位置が良い感じになっていたのですが。
v13 ではなんか妙な挙動になっている気がします。
一部のパッケージで挙動がバグっている
react-syntax-highlighter などが微妙な挙動をしている気がします。
対応策なども見つかっておらず、困ってます。
reportWebVitals が動かない
今までは _app に定義していた reportWebVitals ですが、layout にて export 可能な変数が制限されているっぽく、その中に reportWebVitals が含まれていないみたいです。
別ファイル化したりして対応が必要なのかなーと思いつつ、様子見です。
そんな感じです。
繰り返しになりますが、意外とすんなりアップデート自体は行うことができました。
ただ一方で現場レベルのプロダクトでのアップデートは時期尚早な感じがします、とくにスクロール周りの挙動は個人的に致命的ですね。
とはいえアップデートしたとしても下位互換は完全に残されているため、とりあえずアップデートだけはしちゃっても良いかもですね。
まだリリースされて日も浅いですし、周辺パッケージもじょじょに追いついてくるのかなーと思いつつ、今日このごろです。