リリース·  

Nuxt 3.7

Nuxt 3.7がリリースされました。新しいCLI、ネイティブWebストリームとレスポンス、レンダリングの最適化、非同期コンテキストサポートなど、多くの機能が追加されています。
Daniel Roe

ダニエル・ロー

@danielroe.dev

🐣 新しいCLI

nuxi を以下のものを使ってリファクタリングしました。unjs/cittyそして、これは新しいバージョンに依存する初のNuxtリリースであり、独自のレポジトリに安全に格納されています。これには壮大な計画があります。以下の機能やロードマップの議論をご覧ください。nuxt/cliぜひ貢献してください!

Nuxiはメインの nuxt バージョンから切り離されました。今後、Nuxiのイテレーションとリリースをより迅速に行う予定ですので、近いうちに新しいものにご期待ください!

🕸️ ネイティブWebストリームと Response

以下の改善によりunjs/h3GlobalComponentsunjs/nitroこれにより、サーバーのルートから Response オブジェクトを直接返すことが可能になり、Nuxtでストリームをネイティブに返し、処理することも可能になります。

👉 詳細は以下の記事で確認してください。unjs/h3GlobalComponentsunjs/nitroリリースノート

🔥 HTMLレンダリングの最適化

今回のリリースでは、サーバーからのHTMLレスポンスのレンダリングにいくつかの改善が加えられています。リソースのプリロード/プリフェッチをビルド時に決定するようになりました(build:manifest フックでカスタマイズできます)。また、HTMLのレンダリングは unhead で直接管理するようになりました(#22179これにより、<link><meta><script><style> などの順序を構成できます。そして、私たちの予備的なテストでは、さらに高速になりました!

experimental.headNext フラグを使って、今後のheadの改善をオプトインできます。これには現在、以下のものに基づいた新しい順序付けアルゴリズムが含まれています。capo.js (#22431また、unhead でリリースされる将来の最適化を有効にすることも可能です。

export default defineNuxtConfig({
  experimental: {
    headNext: true
  }
})

皆様のご意見をお待ちしております。問題やフィードバックがあれば、以下のディスカッションにご投稿ください。この議論.

🛠️ ビルド環境ショートカット

Nuxtの設定で、$client および $server ショートカットを使用して、Viteクライアント/サーバー (#22302) またはwebpackクライアント/サーバー (#22304) ビルドに特化した設定を簡単に定義できるようになりました。これは以前は vite:extendConfig および webpack:config フックでのみ可能でした。

例:

export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[hash].js',
            assetFileNames: '_nuxt/[hash][extname]',
            entryFileNames: '_nuxt/[hash].js'
          }
        }
      }
    }
  }
})

⚡️ Vite 4.4

Viteのマイナーバージョンを固定しないように選択しました。これは、Viteが新しい機能バージョンをリリースするたびに、すぐにオプトインできることを意味します。Vite 4.4には、実験的なLightning CSSサポートなど、多くのエキサイティングなものが含まれています!

👉 詳細は以下の記事をご覧ください。Viteリリースノート詳細はこちら

💪 TypeScriptのアップデート

生成される tsconfig.json では、baseUrl を設定する代わりに、純粋に相対パスを使用するようになりました。これにより、絶対パスがIDEと一致しないDockerイメージのような開発環境でのサポートが向上します (#22410).

また、Vite/TSの推奨事項に合わせて、いくつかの追加のコンパイラフラグのデフォルトを設定しました (#22468).

さらに、setPageLayout および <NuxtLayout name> でレイアウトに型ヒント付きでアクセスできるようになりました (#22363).

🦄 非同期コンテキストのサポート

「Nuxt context unavailable」という問題に遭遇したことがある方には朗報かもしれません。NuxtとNitroの両方で、実験的なフラグの下でBunとNodeのネイティブ非同期コンテキストをサポートするようになりました (#20918).

これにより、セットアップ関数内で直接呼び出すことを保証する必要なく、サーバー上でNuxtのコンポーザブルを使用できるようになります。また、Nitroでも同様に、サーバーのルートで使用できる新しい useEvent() ユーティリティが利用可能になります。

試すには、experimental.asyncContext を有効にしてください。

export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

👓 ウォッチャーのアップデート

ウォッチャーに関するいくつかの問題を修正しました。これにより、サーバーを再起動する頻度が減り、レイヤーを使用している場合はパフォーマンスが大幅に向上するはずです。

⚗️ Nitro 2.6

Nitro 2.6から直接、より小さく軽量なサーバーや、.data ディレクトリに新しい永続データストレージなど、さらに多くのエキサイティングな機能が追加されています。

👉 詳細については、以下をご覧ください。リリースの全記事.

✅ アップグレード

いつものように、アップグレードには以下を実行することをお勧めします。

npx nuxi upgrade --force

これによりロックファイルも更新され、特に以下のNuxtが依存する他の依存関係からのアップデートが確実に取得されます。unjsエコシステム

📃 全変更履歴

リリースノートの全文は以下でご覧ください。https://github.com/nuxt/nuxt/releases/tag/v3.7.0