Next.js 13

Wednesday, October 26th 2022 Next.js ConfでNext.js 13が発表されましたね!
現在開発中のプロジェクトがNext.js 12で進めているので早速Upgradeしてみました。

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

Turbopack (alpha)

Viteより10倍、Webpackより700倍早いと謳っているTurbopackが今回の目玉ではないでしょうか。
モジュールが増えるにつれ、ビルド時間も増えてDXが損なわれていたwebpackに替わってくれるのはとても嬉しい。

Turbopackを有効にするには next dev --turbo とするだけ。
新規のNext.js appを作って試してみた分には、ファイルが少なすぎて早くなったかよくわからなかった。
現在開発中のプロジェクトで試してみたところ、MUIを使っているせいでTurbopackでのコンパイルが通らなかった。今後に期待。

app/ Directory (beta)

今までの pages ディレクトリに替わるルーティング。
pages ディレクトリと共存して段階的に移行できる。

今まではLayoutsの適用をページ毎にやろうとすると getLayout をpagesのファイルに記述し _app.tsx で呼び出して囲む…みたいな遠回りしていたものが、 app/ ディレクトリ以下にLayoutsファイルを配置するだけで適用できる。
これも早速移行してみよう。

その他

next/image @next/font next/link なども変更が入っているが、これらも移行していこうと思う。