✨ ローカルモジュールの開発エクスペリエンス改善
ローカルモジュールを有効化し、開発者エクスペリエンスを向上させるための多くの変更が加えられました。
これで、~/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)。
オブジェクト構文でルートを持つ<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
を設定して、リロード時のアプリ状態の一部を保持することもできます。
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#68)console.createTask
を実装しました。
変更前 | 変更後 |
---|---|
![]() | ![]() |
💪 型の改善
サーバーAPIルートの型がより正確になりました。シリアライズできない型が戻り値の型から削除されました(unjs/nitro#1002)。
NuxtApp
の型をより多く追加し、未知のインジェクションの型を正しく指定して、型安全性を高めました(#19643)。
Nuxtデータ取得コンポーザブルでtransform
とdefault
を使用する場合に型の正しさで苦労していた場合は、もう心配ありません。これで型を正しく推論するようになりました(#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名の貢献者の方々に感謝申し上げます 💚