2021年10月にNuxt 3がパブリックベータリリースされました。最初のコミットから1年以上経っていますが、そろそろNuxt 3が正式リリースされようとしています。
この記事ではNuxtがどう変わるのか、どんな魅力があるのかを紹介します。
高速化
Nuxt 3ではNitroというエンジンに変更されます。高速であるという説明はありますが、どれくらい高速化については触れられていません。Nitroの特徴は次のようになっています。
- Node.js/ブラウザ/Service Workerのサポート
- サーバレスサポート
- APIルートサポート
- 自動コード分割と非同期チャンクの読み込み
- 静的サイトとサーバーレスサイトのハイブリッドモード
- モジュールのホットリロード機能付き
APIへのアクセスした場合にも型を解決してくれる機能があります（内部サーバの場合）。モダンなブラウザに対応したコード分割と非同期でのチャンク読み込みも便利でしょう。
Nuxt 3は出力した内容をService Worker上で実行することも想定しているようです。またエッジサイドレンダリングもあがっており、Cloudflare Workersでも実行できます。
Nuxt 3 を Cloudflare Workers で使ってみた
軽量
Nuxt2と比べて1/75以上も小さなサーバ、小さなクライアントバンドルのビルドなどが特徴に上がっています。
アーキテクチャ
Nuxt 3は以下のフレームワークを利用しています。
- Webpack 5
- TypeScript
- Vue3
TypeScriptが設定不要で使えるのは便利でしょう。
TypeScriptとの親和性
これまでもTypeScriptは利用できましたが、標準でサポートされたこともあって、より親和性が高くなっています。
- d.tsの自動生成
- 型チェック
デフォルトでは開発サーバでは自動型チェックを行わないそうです。そこで yarn nuxi typecheck のようにコマンドを実行して型チェックができます。さらに厳密なチェックを有効にする設定も用意されています。
インクリメンタルビルド
Nuxt 3がハイブリッドと呼ぶ静的サイト生成機能があります。これはまだベータ版でもリリースされていませんが、Next.jsのISRに近いものだと思われます。また、他の静的生成モードにも対応しています。
これまでISRを実現しようと思うとVercel + Next.jsといった感がありましたが、Nuxt 3はより汎用的に、さまざまな環境で使えるようになります。これによりNuxt 3はJAMStackを強力にサポートしてくれるフレームワークになるでしょう。
Next.jsのIncremental Static RegenerationをVercel以外でやってみる - Sweet Escape
開発ツール
Nuxt専用コマンドNuxt CLI、Nuxt Devtoolが用意されています（Nuxt Devtoolは間もなく追加されます）。
ESMモジュールのネイティブサポート
これまでもimport構文は利用できていましたが、それはWebpackでの変換が必要でした。また、Webブラウザではmodule指定することでimportが使えますが、Node.jsでは利用できませんでした。最近Node.jsでは拡張子をmjsにしてモジュールファイルとして利用できるようになっています。そこでNuxt 3ではindex.mjsというファイルを生成するようにして、モジュールとして実行できるようになっています。
これまでのNuxtプロジェクトの移行について
Nuxt 2で作られたプロジェクトをアップデートする最適な方法としてNuxt Bridgeが用意されています。これはVue2で動作し、Nitroエンジンを利用するものです。なお、安定性という意味ではNuxt 2 > Nuxt Bridge > Nuxt 3という状態だそうです。モジュールとして提供されるものなので、実際に使ってみてダメであれば外すこともできます。
なお、各アーキテクチャの比較はNuxt 3 - Introductionにて紹介されています。
Nuxt 3の現在の状況
2022/1/17時点ではまだベータです。 まだ解決されるべきissueがあったりバージョンによってはまだruntime errorが起きたりということがあるので、 安定して正式リリースされるのを期待ですね。
まとめ
Nuxt 2で作られているプロジェクトが多数ある中、それらのマイグレーションプランまで用意されているのは好感が持てます。まだベータ版ではありますが、試しに触り始めてみても良さそうです。不具合などがあれば、フィードバックすれば、より早く正式版に近づくことでしょう。
