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