移行時に意図しないところで手間取ったので備忘録です。

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への移行に挑戦してみた