以前作ったNext.js v12のスターターキットをv13にする
初めまして、あるいはお世話になっています。hanetsukiです。
今回のモチベーションは、以前（だいぶ前）公開されたNext.js 13を12の環境にあててみようというモチベです。よろしくお願いします。
こちらが、今回v13に変更したリポジトリになります。
今回やること
- Next.js v12 → v13
- EmotionからCSS Modulesへ変更
CSS Modulesへ変更する理由としては、runtime CSS in JSへの風当たりが最近強いからです...
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であったものが、１３になって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に切り替えています。
Next.jsだけではなく、Svelte KitやAstro・Nuxtなど気になる情報がまだまだいっぱいです。
実際に手を動かすには時間と体力が足りませんが、できるだけドキュメントや他の方が投稿してくださるナレッジに目を通していきたいなと思います。
それでは、今回はこれにて
Discussion