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 なども変更が入っているが、これらも移行していこうと思う。
