はじめに
2022年も残すところあと3日となりました。
皆様いかがお過ごしでしょうか？
筆者は本日が仕事納めです。
今回は忘年記事として2022年のNext.jsのアップデートを振り返っていきたいと思います。
早速ですが以下の通り、2022年は5回も大きなアップデートがありました。
- 12.1(2022/02/18)
- 12.2(2022/06/29)
- 12.3(2022/09/09)
- 13(2022/10/26)
- 13.1(2022/12/23)
それではそれぞれのアップデートを振り返っていきましょう。
12.1(2022/02/18)
- オンデマンドISR（ベータ版）：
getStaticPropsによるページの即時再検証 - SWCへのサポート拡充：
styled-components、Relayなど -
next/jestプラグイン：SWCによるゼロコンフィグのJestサポート - SWCによる高速な最小化（RC版）：Terserより7倍高速な最小化
- セルフホスティングの改善：Dockerイメージのサイズを最大80%削減
- React 18とServer Components（アルファ版）：安定性とサポートの改善
12.1ではオンデマンドISRのベータ版が使えるようになりました（12.2で安定版に）。この機能によって従来のISRでは指定した時間ごとに再検証していたのに対して、任意のタイミングで再検証できるようになりました。
また、next/jestプラグインが使えるようになり、ほぼゼロコンフィグでjestを導入できるようになりました。
その他の機能の詳細はこちら。
12.2(2022/06/29)
- Middleware（安定版）：アプリケーション全体の動的ルーティング
- オンデマンドISR（安定版）：再デプロイなしのコンテンツ更新
- Edge APIルート（実験版）：ハイパフォーマンスなAPIエンドポイント
- Edge SSR（実験版）：エッジでのアプリのサーバーレンダリング
- SWCプラグイン（実験版）：独自プラグインによるコンパイルの拡張
-
next/imageの改善：新しいnext/future/imageコンポーネント
12.2ではMiddlewareの安定版が使えるようになりました。ベータ版のpages配下に_middleware.tsを配置していくNested Middlewareは廃止され、ルート直下にmiddleware.tsを配置してそこにコードを集約させる方式に変更されました。
また、実験版ではありますがEdge APIルートが使えるようになりました（13.1で安定版に）。2022年はエッジコンピューティングがより身近になってきた感じがありますね。
その他の機能の詳細はこちら。
12.3(2022/09/09)
- Fast Refreshの改善：
.env,jsconfig.json,tsconfig.jsonファイルの更新によるホットリロード - TypeScriptの自動インストール：
.tsファイルの追加によるTypeScriptの自動インストール -
next/imageの改善：next/future/imageコンポーネントの安定版 - SWCによる最小化：Next.jsコンパイラーによる最小化の安定版
12.3ではFast Refreshの改善やTypeScriptの自動インストールといったDXの改善がありました。特にFast Refreshの改善では.envファイルの更新によるホットリロードができるようになっており、開発サーバーを再起動する手間がなくなるのは地味に便利ですね。
また、next/imageの改善としてnext/future/imageコンポーネントの安定版が使えるようになりました（13でnext/future/imageはnext/imageに、従来のnext/imageはnext/legacy/imageにリネームされました）。
特にDOM構造が変更され、<div>タグ、または<span>タグのラッパーなしで<img>タグのみがレンダリングされるようになったことでスタイリングがしやすくなりました。
altが必須になったのもアクセシビリティ的に良い改善だと思いました。
13(2022/10/26)
-
appディレクトリ（ベータ版）：より簡単に、より速く、より少ないクライアントJS- Layouts
- React Server Components
- Streaming
- Turbopack（アルファ版）：最大700倍速いRustベースのWebpackの後継
- 新しい
next/image：ネイティブブラウザの遅延ローディングでより速く - 新しい
@next/font（ベータ版）：ゼロレイアウトシフトで自動セルフホスティングのフォント -
next/linkの改善：自動で<a>タグを表示するようにAPIをシンプル化
13では何と言ってもappディレクトリのベータ版が使えるようになりました。
新機能が盛り沢山なのでこの記事で全てに触れることはしませんが、個人的にはNested Layoutsができるようになったこと、React Server Componentsによってレンダリングの考慮単位がページからコンポーネントに細分化されたことはUX/DX双方に大きな影響を与えると思っています。
まだベータ版ということで公式でも本番環境で使うのはおすすめしないとのことですが、今後主流になっていくはずなのでキャッチアップしていきたいですね。
また、アルファ版ではありますがWebpackの後継のTurbopackが使えるようになったのはサプライズでした。
Viteより最大10倍速いという表記に対してはViteの作者であるEvan You氏からベンチマークが正確ではないのではないかというフィードバックがありましたが、高速なバンドラーであることは間違いなさそうです（その後フィードバックを元にベンチマークに改善を加えているようです）。
現状は開発環境（next dev --turbo）のみで使えますが、筆者の個人開発のPJでは動きませんでした（Framer Motionに未対応のため）。
何にせよ今後が楽しみですね。
13.1(2022/12/23)
-
appディレクトリの改善：信頼性とパフォーマンスの改善 - ビルトインモジュールトランスパイル：
next-transpile-modulesの機能を統合 - Edgeランタイム（安定版）：Edge用の軽量なNode.jsランタイム
- Turbopackのアップデート：Tailwind CSS,
next/image,next/fontなどのサポート - Middlewareの改善：レスポンスの返却とリクエストヘッダの設定
- SWCインポートの解決：Barrelファイル使用時のより小さなJavaScriptバンドル
13.1ではnext-transpile-modulesの機能がNext.js本体に統合されました。
使用しているパッケージでトランスパイルが必要だったり、モノレポだったりでnext-transpile-modulesを使用している開発者は多いのではないかと思いますので、Next.js本体に統合されたのは良い流れですね。
また、Middlewareが改善され、レスポンスの返却とリクエストヘッダの設定ができるようになりました。
特にレスポンスの返却はベータ版ではできていたのが安定版ではできなくなっており、pages/api配下に専用のエンドポイントを作成し、redirectかrewriteする必要があったので少し手間でしたが、NextResponse経由でレスポンスの返却ができるようになったのは嬉しいですね。
その他の機能の詳細はこちら。
おわりに
以上です。
想像以上に量が多く、フロントエンドの変化の速さを思い知らされました。
今年はやはりappディレクトリを含むNext.js 13が出たことでエポックメイキングな年になったのではないでしょうか。
来年はappディレクトリの改善や開発者への定着がメインの年になりそうですね。
それではよいお年&Next.jsライフを！
Discussion