私が歌川です

@utgwkk が書いている

utgw.netをNext.js App Routerに移行した

技術

移行しました。といっても元々ペライチのページだし、とくに自明じゃないことはやっていないと思います。

前提

やったこと

ライブラリを最新にする

ライブラリが古びていたのでまずはバージョンを上げました。メジャーバージョンアップ上等で、ぱっと見で明らかに壊れていないならいいでしょう、という方針で進めました。VSCodeのformat on saveにもprettierを使っているはずですが、format on saveと prettier --write でコードの整形結果が違う*1のを目撃したけど、見なかったことにします。

github.com

Node.jsのバージョンを .node-version ファイルで16にpinしていたら古いよ、と言われてNetlifyでのビルドに失敗したので .node-version ファイルを消したらNode.js 12 (！？) が使われてしまいました。ビルド時に NODE_VERSION 環境変数をセットすることで解決しました。なんかデフォルトでいい感じのLTSバージョンが使われてほしいけどこういう感じなのか？

docs.netlify.com

target: "serverless" は使えない、と言われたので消したけどふつうに動いていそうです。

App Routerに移行する

ライブラリが最新になったので移行をやっていきます。とはいっても公式ドキュメントのガイドに従っていけばおおむね移行できます。最初はこの移行ガイドも見ていなくて、雰囲気でファイルを用意していったけどなんとかなりました。

nextjs.org

github.com

next.config.jsで output: "export" を指定すると手元環境向けのリダイレクト設定を redirects フィールドに書けないのでどうしたものか、と思っていたのですがビルドフェーズを見ることで手元環境向けの設定とビルド時の設定を分けて書けるようでした。リダイレクトはNetlify側の設定でやっているので手元で動けばじゅうぶんです。

nextjs.org

CSSをimportするのもふつうに動いていそうです。

感想

pageコンポーネントが非同期関数になっていて、おもむろにfetchできるのがかっこいいですね。

*1:format on saveだと末尾カンマが入らない