Nuxt Nation カンファレンス開催!11月12日〜13日、ご参加ください。
リリース·  

Nuxt 3.3

3.3.0 はマイナー(機能)リリースで、パフォーマンスと開発者エクスペリエンスの改善、バグ修正、そして新しい機能が多数含まれています。

✨ ローカルモジュールの開発エクスペリエンス改善

ローカルモジュールを有効化し、開発者エクスペリエンスを向上させるための多くの変更が加えられました。

これで、~/modules フォルダーを自動的にスキャンし、そこに含まれるトップレベルファイルをプロジェクトのモジュールとして登録するようになりました(#19394)。

これらのファイルが変更されると、Nuxtサーバーが自動的に再起動されます。

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
-   '~/modules/purge-comments'
  ]
})

@nuxt/kit をインストールしなくても、ローカルプロジェクトで kit のコンポーザブルに簡単にアクセスできるように、nuxt/kit を公開するようになりました(#19422)。

ローカルモジュールに関するドキュメントを読む.

♻️ Nuxtの再起動

watch 配列にファイルを追加して、サーバーを自動的に再起動できるようになりました(#19530)。これはモジュール作成者にとって特に役立つでしょう。新しいrestartフックを使用して、Nuxtサーバーの再起動をトリガーすることもできます(#19084)。

🔥 パフォーマンス改善

ベストプラクティスとして、静的アセットのmaxAgeを1年に増やし(#19335)、ビルドでより多くのツリーシェイキングをサポートするようになりました(#19508)。

nuxt-performance-improvements

オブジェクト構文でルートを持つ<NuxtLink>のプリロードもサポートするようになりました(#19120)。

<NuxtLink :to="{ name: 'home', query: { year: '2023' } }">Home</NuxtLink>

また、使用する各モジュールのセットアップにかかる時間を追跡し、時間がかかりすぎる場合は警告を表示します。DEBUG=1で開発サーバーを実行すると、これらの値を確認できます(#18648)。

DEBUG=1 npx nuxt dev
 Module pages took 1.5ms to setup.
 Module meta took 3.15ms to setup
 Module components took 4.5ms to setup.
...

特定の環境でコンポーザブルをツリーシェイクするか(#19383)、マジックキーを自動的に挿入するか(#19490)を選択して、Nuxtの内部最適化の一部を利用することもできます。

🐛 エラー処理

チャンクエラーをデフォルトで処理するようになりました(#19086)。つまり、サイトが再デプロイで更新された場合、**ナビゲーション時に自動的にリロードされます**。

この動作を無効にするには、experimental.emitRouteChunkErrorオプションを'manual'に設定し、新しいreloadNuxtAppコンポーザブルを使用して自分で処理します。実装方法の詳細については、chunk-reload.client.tsプラグインを参照してください。

experimental.restoreStateを設定して、リロード時のアプリ状態の一部を保持することもできます。

nuxt.config.ts
defineNuxtConfig({
  experimental: {
    restoreState: true
  }
})

新しい実験的なエラー処理コンポーネントも追加されました。<NuxtClientFallback>#8216)は、サーバーでのレンダリングエラーを検出し、フォールバックコンテンツに置き換え、エラーのある部分をクライアント側で詳細に再レンダリングできます。experimental.clientFallbackで有効にできます。フィードバックをお待ちしています!

⚡️ Head の改善

unhead を直接使用するように移行しました(#19519)。また、useServerHeadなどのサーバー専用Headコンポーザブルをクライアントビルドから自動的にツリーシェイクするようになりました(#19576)。これにより、クローラーのみに関連するメタタグロジックをクライアントビルドに含める必要がなく、優れたSEOを実現できます。

信頼できないユーザー入力の消毒を処理する新しいuseHeadSafeコンポーザブルも追加されました(#19548)。

🪵 ブラウザのDevToolsでのログ出力の改善

Chrome DevToolsチームと協力して、unjs + Nuxtエコシステム全体でいくつかの機能を追加しました。これにより、(現時点ではChromiumベースの)ブラウザのログからNuxtの内部スタックトレースを非表示にするためのファーストクラスのサポートが提供されるようになりました。#19243。また、Nuxtフックに関連するスタックトレースについてもいくつかの改善を行いました(unjs/hookable#69およびunjs/hookable#68console.createTaskを実装しました。

変更前変更後
before-nuxt-console-improvementsafter-nuxt-console-improvements

💪 型の改善

サーバーAPIルートの型がより正確になりました。シリアライズできない型が戻り値の型から削除されました(unjs/nitro#1002)。

NuxtAppの型をより多く追加し、未知のインジェクションの型を正しく指定して、型安全性を高めました(#19643)。

Nuxtデータ取得コンポーザブルでtransformdefaultを使用する場合に型の正しさで苦労していた場合は、もう心配ありません。これで型を正しく推論するようになりました(#19487)。

⚗️ Nitro の強化

このリリースには、Nitro v2.3が含まれており、多くの改善が加えられています。リリースで詳細を確認してください。

NitroサーバールートでuseAppConfigをサポートするようになりました(#19489)。これは長らく待望されていた変更です。これでuseAppConfigは、レイヤー、モジュールなどからランタイム以外の設定を行うために、アプリ全体で一貫して使用できるようになりました。

Nitroのプリレンダリング/ビルドフェーズからのアセット出力を変更するためのnitro:build:public-assetsフックも追加しました(#19638)。

🛠️ ビルドの変更

--shamefully-hoistなしでPNPとpnpmをファーストクラスでサポートする方向への移行の一環として、CJS解決パターンを使用するいくつかの内部(非推奨)ユーティリティのサポートを削除しました(#19537および#19608)。

また、nuxt@nuxt/kitなどをESM検索パスを使用して解決するようになりました。これについては引き続き注意深く監視していきます。

新しいTypeScript Node16モジュール解決のサポートの準備も行っています(#19606)。このため、ランタイム出力の形式を変更しました(.mjs拡張子の代わりに.js拡張子を使用し、サブパスエクスポートにtypesフィールドを提供するなど)。

🗺️ カスタム設定スキーマ(上級)

モジュールとユーザーがNuxt設定スキーマを拡張できる実験的な機能をテストしており、この機能をデフォルトで有効にしました(#15592#19172)。これは特にモジュールとレイヤー/テーマの作成者にとって役立ち、ユーザーの開発者エクスペリエンスが向上すると期待しています。

変更ログ

変更点を比較して完全な変更ログを確認するか、GitHubのリリースを確認してください。

このリリースにご協力いただいた28名の貢献者の方々に感謝申し上げます 💚

← ブログに戻る