個人開発のポートフォリオサイトをNext.js 13にアップデートしてみた
はじめに
Next.js 13がリリースされましたね。
今回は個人開発のポートフォリオサイトをNext.js 13にアップデートしてみたので、その対応を共有していきます。
アップデート前の環境
next@12.3.1
アップデート対応
公式のリリースブログを見ながら進めていきます。
Next.js 13にアップデート
Renovateを導入しているのでPRが作成されていました（CIでは型チェックが落ちているのとデプロイに失敗していました）。
とりあえずローカルに持ってきてyarnします。
app/ Directory (beta)
当サイトはChakra UIを使用しており、現状は未対応ということで特に何もしていません。
今度Tailwind CSSに置き換えて使用してみたいなあと思っています。
Introducing Turbopack (alpha)
噂のTurbopackがnext devなら使用できるということで使用してみました。
従来のWebpackと立ち上がりの速度を比較するために.nextを削除、node_modulesを削除して再インストールしてから検証してみました。
結果は…
# Webpack(yarn dev)
compiled client and server successfully in 1501 ms (773 modules)
# Turbopack(yarn dev --turbo)
initial compilation 9.636ms
はっや！
コードベースが超小規模なのでほぼ変わらんだろうなと思ってましたが、体感できるレベルで早かったです（従来のWebpackも遅いと思うことはなかった）。
しかし、localhost:3000を開いてみると…
error - [rendering] [root of the dev server]/ Error during SSR Rendering
ReferenceError: scrapeMotionValuesFromProps is not defined
どうやらframer-motion周りでエラーが起きてるようですが、さすがに解決できず。
まだalphaなので一旦スキップすることにしました。
next/image
next/future/imageを使用している箇所で型エラーが起きていたので直します。
公式からcodemodが出ているので使ってみます。
npx @next/codemod next-image-to-legacy-image ./src
next/future/imageを使用していたのですが、きちんとnext/imageに置換されていました。
ただしそこまで画像を使用しているサイトではないため、対象は2件のみでした。
@next/font
Google Fontsやカスタムフォントを自動で最適化してセルフホスティングしてくれる機能です。
Typefaces（今はFontsource）みたいな感じですね。
この機能はまた別記事で使ってみたいと思います。
next/link
next/linkの子要素にaが不要となったので直します。
こちらも公式からcodemodが出ているので使ってみます。
npx @next/codemod new-link ./src
Chakra UIを使用していたのですが、きちんとlegacyBehaviorが付与されていました。
対象は7件でした。
また、僕の環境では修正前は以下のハイドレーションエラーが出ていましたが、修正後は解決しました。
Error: Hydration failed because the initial UI does not match what was rendered on the server.
OG Image Generation
少し前に発表されていた機能ですね。
サイトには既に実装してあります。
Breaking Changes
Breaking Changesがそこそこあるので確認しておきたいですね。
しれっとReactの最低バージョンが18.2.0と最新バージョンになっていて、Next.js 13から新時代が始まる予感がしますね。
おわりに
ざっとこんな感じでアップデート対応は完了しました。
新機能はほとんど使えてないですが、まだまだbetaやalphaのものが多いのでこれからゆっくり使っていければいいかなと思っています。
公式ドキュメントもbeta版が公開されていて、Next.js 13から色々大きく変わっていきそうなのでキャッチアップしていきたいですね。
それではよいNext.jsライフを！
Discussion