移行時に意図しないところで手間取ったので備忘録です。
Next.js本体の移行作業
小規模なアプリということもあり、基本的には公式のマイグレーションガイドで概ね解決。
https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration
トラブルと対応
ヘッダがMetadetaになったのでcdnのリンクを差し込めない
fontawesomeのcdnリンクなど。
layout内にheadタグ書いてその中に入れればよしなに合成してくれる。
Issueはあったけどclose。
https://github.com/vercel/next.js/issues/46785
next devでは動くけどnext buildでエラー
API RoutesでresponseLimitの設定ができない
https://github.com/vercel/next.js/issues/55589
https://github.com/vercel/next.js/discussions/53986
公式ドキュメントには記載があるものの、この通りに記載してもdeprecatedでエラーとなってしまう。
https://nextjs.org/docs/messages/api-routes-response-size-limit
解決できず、部分的にPages Routerに戻して回避。
next devでは動くけどnext build->startでエラー
RangeError: Maximum call stack size exceeded
原因はUIコンポーネント(material-tailwind)のAppRouter非対応。
特定バージョンでのNext.jsなら動くとのことでv13.5.3に固定して解決。
v13.5.7のcanaryでも行けるらしいですが少し様子見。
Material TailwindのNext.jsバージョン問題Issue
google cloud storageへのファイルアップロードエラー
原因はNext.jsのバージョンをv13.4からv13.5に上げたためにserverMinificationのデフォルトがtrueになり、node-fechがエラーになっていたため。
next.config.jsでserverMinification: falseを明示的に指定して解決。
Next.jsのserverMinificationの変更起因トラブルIssue
その他
nodeもついでにv16->v20に上げたのですが、github actionsのself-hosted runnerが対応しておらず、
そちらの設定更新なども必要でした。
最後に
Next.jsがrecommendしているし、登場から半年以上経っているのでもう大丈夫だろうと移行に踏み切りましたが、本体こそスムーズに移行できたもののライブラリ周りでは思ったより手間取りました。
誰かのお役に立てば幸いです。
参考
Next.jsの公式App Router説明ページ
ざっくりApp Router入門【Next.js】
Next.jsのPages RouterからApp Routerへの移行に挑戦してみた