🎃

個人開発のポートフォリオサイトをNext.js 13にアップグレードしてみた

2022/10/29に公開約2,600字

はじめに

Next.js 13がリリースされましたね。
今回は個人開発のポートフォリオサイトをNext.js 13にアップグレードしてみたので、その対応を共有していきます。

https://portfolio-adachi.vercel.app

アップグレード前の環境

  • next@12.3.1

アップグレード対応

公式のリリースブログを見ながら進めていきます。

https://nextjs.org/blog/next-13

Next.js 13にアップグレード

Renovateを導入しているのでPRが作成されていました(CIでは型チェックが落ちているのとデプロイに失敗していました)。
とりあえずローカルに持ってきてyarnします。

app/ Directory (beta)

当サイトはChakra UIを使用しており、現状は未対応ということで特に何もしていません。
今度Tailwind CSSに置き換えて使用してみたいなあと思っています。

https://nextjs.org/blog/next-13#app-directory-beta

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なので一旦スキップすることにしました。

https://nextjs.org/blog/next-13#introducing-turbopack-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)みたいな感じですね。
https://zenn.dev/a_da_chi/articles/6b666c0e77dedb

この機能はまた別記事で使ってみたいと思います。

https://nextjs.org/blog/next-13#nextfont

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.

https://nextjs.org/blog/next-13#nextlink

OG Image Generation

少し前に発表されていた機能ですね。
サイトには既に実装してあります。

https://zenn.dev/monicle/articles/f02e4a12da960b

https://nextjs.org/blog/next-13#og-image-generation

Breaking Changes

Breaking Changesがそこそこあるので確認しておきたいですね。
しれっとReactの最低バージョンが18.2.0と最新バージョンになっていて、Next.js 13から新時代が始まる予感がしますね。

https://zenn.dev/monicle/articles/f02e4a12da960b

おわりに

ざっとこんな感じでアップグレード対応は完了しました。
新機能はほとんど使えてないですが、まだまだbetaやalphaのものが多いのでこれからゆっくり使っていければいいかなと思っています。

公式ドキュメントもbeta版が公開されていて、Next.js 13から色々大きく変わっていきそうなのでキャッチアップしていきたいですね。

https://beta.nextjs.org/docs

それではよいNext.jsライフを!

Discussion

ログインするとコメントできます