ゆるくまとめるNext.js13のアプデ内容
2022年10月26日、みんな大好きNext.jsのバージョン13が発表されました。
本記事ではバージョン12→13で何が変わるのか、公式発表を意訳する形式（と筆者のおしゃべり）でまとめていきたい所存です。
もちろん、英語つよつよな方&コードなどの詳細は原文を参照のこと。
appディレクトリを追加
Next.jsの最大の恩恵といえば、page/ディレクトリによる思考停止ルーティングを思い浮かべる人も多いはず。
バージョン13ではさらにapp/ディレクトリという仕組みを追加し、フレームワークとしてさらなる進化を遂げたい、ということのようです。
appディレクトリの特徴は以下。
- Layouts: 複数ページにまたがる共通のコンポーネントを再レンダリング等に配慮して設置！
- Server Components: クライアントに送信されるデータ量を減らして高速化！
- Streaming: ページ全体のロードを待たずにユーザーは操作可能！
- Suspense for Data Fetching: より柔軟で強力なデータ取得！
また、appディレクトリは段階的な導入が可能なので、v13に上げてから折を見てちょっとずつ導入していくのもよさそうです。
Rust製バンドルツールTurbopack（ターボパック）
おそらくフロント界隈イチの注目はこのRust製バンドルツールTurbopack。
名前からしてよっぽど速いんだろうな…という予感がします。その速さたるやなんとWebpackの700倍！Vite(esbuild)の10倍！！
3,000個のモジュールを使ったアプリの起動時間が1.8秒とのこと。（Webpackは16.5秒）
「…嘘でしょ？自分たちの有利な条件でやったんでしょ…？」 と疑いたくなりますね。
そんな中、Vue.jsやViteの生みの親であるEvan You氏がTurbopackについてツイートしていました。
・「10 倍速」は 0.01 秒対 0.09 秒
・swc を追加すると、node_modules のインストール サイズが 58MB (!!)追加されますが、Vite 全体 (esbuild を含む) は 19MB です。
とチクリ。しかしこんなツイートも。
か、かっこよすぎるやろ…。
ちなみにTurbopackの公式サイトもありました。まだまだ未対応な部分も多く、「Next.jsのツール」感が否めないですが、これからの進化に期待できそうです。
Imageコンポーネントの進化
Imageコンポーネントも進化を遂げたそう。
レイアウトシフトさせずに画像を表示するのが簡単になったり、オンデマンドで最適化できるようになったり。
画像をモジュールみたいにimportしておくと自動的にwidthとheightを取得してレイアウトシフトに対応してくれるの、Web制作あがりとしては非常にありがたい…。
レイアウトシフトは近年ではSEO要件としてGoogleが重要視している観点なので、ぜひ意識して対応しておきたいですね。
新しいフォントシステムの導入（β）
見出しのとおり。特徴は以下。
- フォントの自動最適化（カスタムフォント含む）
- 外部へのリクエストを削除→プライバシーとパフォーマンスに寄与
- 自動セルフホスティング機能
- CSSのサイズ調整でレイアウトのズレを自動でゼロに
フォントはビルド時にダウンロードされて、静的アセットと一緒にホストされるとのこと。
現状、対応しているのはGoogle FontsとTypekitで、これら以外のプロバイダも順次サポートの予定だそうです。わくわく。
ローカルフォントも次のようにして変数っぽくラクラク使えます。（コードはサイトより引用）
import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>
Linkコンポーネントの進化
Linkコンポーネントも進化しています。
バージョン12.2でもオプションとしてありましたが、バージョン13からLinkコンポーネントはつねに自動で<a>タグをレンダリングします！
コード引用にて失礼しますが、これが
<Link href="/about">
<a>About</a>
</Link>
こう書けます↓
<Link href="/about">
About
</Link>
地味に大きいインパクトがあると感じるのは僕だけでしょうか…。
とはいえ、Linkの内部にhref属性を持つaタグがある場合はLinkコンポーネントにpassHrefを書いてやる必要があったりと、注意点はありそうです。
詳しくはドキュメントに譲ります。
今回の発表で大きく取り上げられていたアップデートはこれで以上です。
ほかにもSNSカードの動的生成、ミドルウェアのアプデなどもあるようです。
フロントエンド界隈の目まぐるしい発展になんとかしがみついていきたいマツヤマでした。
Discussion