Next.js 13.3 リリース

 (nextjs.org)
9 ポイント 投稿者 ragingwind 2023-04-07 | 2件のコメント | WhatsAppで共有
  • File-Based Metadata API を追加
    • page または layout で動的・静的に export した Metadata を HTML の title、link、meta タグの値に変換
    • Config-based Metadata では、ファイル規則に従ってファイルを読み込み、そのページの meta 値に追加
      • 例: opengraph-image.jpg という名前のファイルがあれば => <meta property=og:image” .. /> に変換して追加
    • Metadata API は 13.3 の App Router(app) からサポート
  • Dynamic Open Graph Image Generation: 特別な外部パッケージなしで ImageResponse を使って動的画像を生成可能。前述の config-based metadata で opengraph-image.tsx を使えば、リクエスト時に適切な Open Graph 値と Twitter 画像を生成可能
  • Static Export for App Router: App Router は完全な静的ページをサポートするようになった。
    • 設定ファイルに output: ‘export’, オプションを追加して next build を実行すると、各ルートごとに HTML ページが生成される
    • 動的データを取得してレンダリングする場合、Server Components でもビルド中にデータを取得して HTML として生成
    • ビルド時にどのデータを取得すべきかわからない場合は Client Component を使用
  • Parallel Routes and Interception: Next.js 13.3 では新しい動的ルールが導入され、高度なルーティング手法を実装可能。
    • Parallel Routes: 1つ以上のページを同時に（条件に応じて）同一画面上でレンダリング可能。@ で始まる slots を複数指定し、各 slot ごとに異なるページをレンダリングできる
    • Intercepting routes: (..) で始まるルールを使って、現在のレイアウト内で新しいルートを読み込める。現在のページのコンテキスト情報を維持するのに有用

関連記事

2件のコメント

 
kdy1234 2023-04-08

残念ながら、今回は私のパッチはほとんど含まれていませんね。
Wasm の問題は修正したのですが、レビューと CI 関連の作業のため、まだ反映されていません
 
chanhee 2023-04-08

今回反映されると思って期待していたのですが、残念です。お疲れさまでした〜