🐢

以前作ったNext.js v12のスターターキットをv13にする

2022/12/16に公開約2,400字

初めまして、あるいはお世話になっています。hanetsukiです。
今回のモチベーションは、以前(だいぶ前)公開されたNext.js 13を12の環境にあててみようというモチベです。よろしくお願いします。

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

こちらが、今回v13に変更したリポジトリになります。
https://github.com/tsuki-lab/nextjs-latest-starter

今回やること

  • Next.js v12 → v13
  • EmotionからCSS Modulesへ変更

CSS Modulesへ変更する理由としては、runtime CSS in JSへの風当たりが最近強いからです...

Upgrade Guideが公式で出ているのでこちらを参考に進めていきます。
https://beta.nextjs.org/docs/upgrade-guide

Node.js Version

The minimum Node.js version is now v14.6.0. See the Node.js documentation for more information.

Node.jsの最低動作環境がv14.6.0になったようですね。
もしお手元のNode.js環境が古いようであればアップデートしましょう。

Next.js Version

早速Next.js本体とそれにまつわる依存環境をアップデートしましょう。

yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

私は、yarnを利用しているので上記のコマンドを実行しました。

ESLint Version

ESLintを利用しているのであればバージョンを最新にしておきましょう。

yarn add -D eslint@latest

Upgrading New Feature

<Image/>Component

next/imageのコンポーネントが新しくなりました。
以前のバージョンでは、next/future/imageであったものが、13になってstetableになったようです。

以前のバージョンのnext/imageを利用したい場合は、next/legacy/imageを用いることで利用できるようです。

<Link>Component

<Link>コンポーネントは、<a>タグを手動で追加する必要がなくなりました。
この動作はバージョン12.2で実験的なオプションとして追加されましたが、13ではデフォルトになっています。

Next.js 13 では、下記のように記述できるようです。

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
  About
</Link>

Font Optimization

以前の、Next.jsは、フォントCSSをインライン化することによって、フォントの最適化を支援されてましたが、
13では、next/font(ベータ版)が導入され、優れたパフォーマンスとプライバシーを確保しながら、フォントの読み込み体験をカスタマイズできるようになったそうです。

Migrating from pages to app

今回の大型アップデートですね。しかし、

との注意書きがあったので、今回は見送ることにしました。

引き続き13でもpagesディレクトリが利用できるようなので、そこは安心しました。
Layout RFCについてはまたの機会に挑戦していくことにします。

おわりに

Next.jsもバージョンが上がり、期待値が高まりますね。

個人的には、CSS in JSのEmotionが、Next.jsのappディレクトリで動かないところが、おやおや...といったところです。

スターターリポジトリでは、EmotionからCSS Modulesに切り替えています。
https://github.com/tsuki-lab/nextjs-latest-starter

Next.jsだけではなく、Svelte KitやAstro・Nuxtなど気になる情報がまだまだいっぱいです。
実際に手を動かすには時間と体力が足りませんが、できるだけドキュメントや他の方が投稿してくださるナレッジに目を通していきたいなと思います。

それでは、今回はこれにて

Discussion

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