Next.js 13.3

claudejamodel: claude-sonnet-4-20250514

Next.js 13.3

投稿者: Delba de Oliveira @ delba_oliveira
Tim Neutkens @ timneutkens

Next.js 13.3では、コミュニティから要望の多かった以下の機能が追加されました：

File-Based Metadata API: sitemap、robots、favicon等を動的に生成
Dynamic Open Graph Images: JSX、HTML、CSSを使用してOG画像を生成
Static Export for App Router: Server Componentsの静的/Single-Page Application (SPA)サポート
Parallel Routes and Interception: App Routerの高度なルーティング機能

今すぐ以下のコマンドでアップデートしてください：

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

次のマイナーリリースでApp Routerを安定版としてマークすることに近づいており、パフォーマンスの最適化、動作の改善、バグ修正に焦点を移しています。Mutationsなどいくつかの機能にまだ取り組んでいますが、これらが他のApp Router機能のAPIサーフェスに影響を与えることは想定していません。

App Routerで皆さんが何を構築するかを楽しみにしており、フィードバックをお待ちしています。

File-Based Metadata API

Next.js 13.2では、新しいMetadata APIを発表しました。これにより、layoutやpageからMetadataオブジェクトをエクスポートすることで、メタデータ（例：HTMLのhead要素内のtitle、meta、linkタグ）を定義できます。

// layout.js または page.js
// 静的メタデータ
export const metadata = {
  title: 'Home',
};
// 出力:
// <head>
//   <title>Home</title>
// </head>

// または動的メタデータ
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return {
    title: product.title
  };
}
// 出力:
// <head>
//   <title>My Unique Product</title>
// </head>

export default function Page() {}

設定ベースのメタデータに加えて、Metadata APIは新しいファイル規約をサポートし、SEOの改善とWebでの共有のためにページを便利にカスタマイズできます：

opengraph-image.(jpg|png|svg)
twitter-image.(jpg|png|svg)
favicon.ico
icon.(ico|jpg|png|svg)
sitemap.(xml|js|jsx|ts|tsx)
robots.(txt|js|jsx|ts|tsx)
manifest.(json|js|jsx|ts|tsx)

例えば、ファイルベースのメタデータを使用してアプリにfaviconを追加し、/aboutページにOpen Graph画像を追加できます：

app
├── favicon.ico
├── layout.js
├── page.js
└── about
    ├── opengraph-image.jpg
    └── page.js

Next.jsは本番環境でこれらのファイルをハッシュ付き（ファイル名用）で自動的に配信してキャッシュし、アセットのURL、ファイルタイプ、画像サイズなどの正しいメタデータ情報で関連するhead要素を更新します。

<!-- "/"を訪問 -->
<link rel="icon" href="<computedUrl>" />

<!-- "/about"を訪問 -->
<link rel="icon" href="<computedUrl>" />
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />

アプリケーションに静的ファイルを追加することが最もシンプルなアプローチですが、ファイルを動的に作成する必要がある場合もあります。各静的ファイル規約には、ファイルを生成するコードを書くことができる動的な（.js|.jsx|.ts|.tsx）バリアントが付属しています。

例えば、静的なsitemap.xmlファイルを追加することもできますが、ほとんどのサイトには外部データソースを使用して動的に生成されるページがあります。動的なsitemapを生成するには、動的ルートの配列を返すsitemap.jsファイルを追加できます。

// app/sitemap.js
export default async function sitemap() {
  const res = await fetch('https://.../posts');
  const allPosts = await res.json();
  
  const posts = allPosts.map((post) => ({
    url: `https://acme.com/blog/${post.slug}`,
    lastModified: post.publishedAt,
  }));
  
  const routes = ['', '/about', '/blog'].map((route) => ({
    url: `https://acme.com${route}`,
    lastModified: new Date().toISOString(),
  }));
  
  return [...routes, ...posts];
}

設定ベースと新しいファイルベースのオプションにより、静的および動的メタデータの両方をカバーする包括的なMetadata APIが利用できるようになりました。

Metadata APIは13.3のApp Router（app）で利用可能です。pagesディレクトリでは利用できません。

ファイルベースメタデータの詳細とAPIリファレンスをご覧ください。

Dynamic Open Graph Image Generation

6ヶ月前、JSX、HTML、CSSを使用して動的に画像を生成できるライブラリ@vercel/ogとSatoriをリリースしました。@vercel/ogはNext.js Confでテストされ、すべての参加者向けに100,000枚以上の動的チケット画像を生成しました。

Vercelの顧客での広範な採用と、リリース以来900,000回以上のダウンロードを受けて、外部パッケージを必要とせずに、すべてのNext.jsアプリケーションに動的に生成された画像を提供できることを嬉しく思います。

next/serverからImageResponseをインポートして画像を生成できるようになりました：

// /app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';

export const size = {
  width: 1200,
  height: 600
};
export const alt = 'About Acme';
export const contentType = 'image/png';
export const runtime = 'edge';

export default function og() {
  return new ImageResponse(
    // ...
  );
}

ImageResponseは、Route Handlersやファイルベースメタデータなど、他のNext.js APIとうまく統合されます。例えば、opengraph-image.tsxファイルでImageResponseを使用して、ビルド時またはリクエスト時に動的にOpen GraphとTwitter画像を生成できます。

Image Response APIの詳細をご覧ください。

Static Export for App Router

Next.js App Routerは完全な静的エクスポートをサポートするようになりました。静的サイトまたはSingle-Page Application (SPA)として開始し、後でオプションでサーバーを必要とするNext.js機能を使用するようにアップグレードできます。

next buildを実行すると、Next.jsはルートごとにHTMLファイルを生成します。厳密なSPAを個別のHTMLファイルに分割することで、Next.jsはクライアント側で不要なJavaScriptコードの読み込みを回避し、バンドルサイズを削減してページの読み込みを高速化できます。

// next.config.js
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
};

module.exports = nextConfig;

Static Exportは、静的Route Handlers、Open Graph画像、React Server Componentsなど、app routerの新機能と連携します。例えば、Server Componentsは従来の静的サイト生成と同様にビルド中に実行され、初期ページ読み込み用の静的HTMLとルート間のクライアントナビゲーション用の静的ペイロードにコンポーネントをレンダリングします。

以前、pagesディレクトリでStatic Exportを使用するには、next exportを実行する必要がありました。しかし、next.config.jsオプションにより、output: 'export'が設定されている場合、next buildはoutディレクトリを出力します。app routerとpagesディレクトリで同じ設定を使用できます。これはnext exportがもはや不要であることを意味します。

高度な静的エクスポートサポートにより、cookies()やheaders()などのサーバーを必要とする動的関数を使用しようとした場合など、開発プロセス（next dev）でより早くエラーが発生します。

Static Exportの詳細をご覧ください。

Parallel Routes and Interception

Next.js 13.3では、高度なルーティングケースを実装できる新しい動的規約、Parallel RoutesとIntercepting Routesを導入しています。これらの機能により、複雑なダッシュボードやモーダルのように、同じビューで複数のページを表示できます。

Parallel Routesを使用すると、独立してナビゲートできる同じビューで1つ以上のページを同時にレンダリングできます。ページを条件付きでレンダリングするためにも使用できます。

Parallel Routesは名前付き「スロット」を使用して作成されます。スロットは@folder規約で定義されます：

dashboard
├── @user
│   └── page.js
├── @team
│   └── page.js
├── layout.js
└── page.js

同じルートセグメントのlayoutは、スロットをpropsとして受け取ります：

// app/dashboard/layout.js
export default async function Layout({ children, user, team }) {
  const userType = getCurrentUserType();
  return (
    <>
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

上記の例では、@userと@teamのparallel routeスロット（明示的）がロジックに基づいて条件付きでレンダリングされます。childrenは@folderにマップする必要のない暗黙的なルートスロットです。例えば、dashboard/page.jsはdashboard/@children/page.jsと同等です。

Intercepting routesを使用すると、ブラウザのURLを「マスク」しながら、現在のレイアウト内で新しいルートを読み込むことができます。これは、フィードの写真をモーダルで展開する場合など、現在のページのコンテキストを保持することが重要な場合に便利で、フィードはモーダルの背景に保持されます。

Intercepting routesは、相対パス../と同様の(..)規約で定義できます。appディレクトリに相対的なパスを作成するために(...)規約も使用できます。

feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

上記の例では、ユーザーのプロフィールから写真をクリックすると、クライアント側ナビゲーション中にモーダルで写真が開きます。ただし、ページを更新または共有すると、デフォルトのレイアウトで写真が読み込まれます。

Parallel routesとinterceptionにより、Instagramのようなモーダルルーティングが可能になります。これは、URLを通じてモーダルコンテンツを共有可能にする、ページが更新されたときにコンテキストが失われることを防ぐ、前後のナビゲーションでモーダルを閉じて再開するなど、モーダルを作成する際の課題を解決します。

より多くの例と動作については、Parallel and Intercepting Routesドキュメントをご覧ください。

その他の改善

デザインアップデート: Next.jsのホームページとショーケースが新しいデザインでリフレッシュされました。
Turbopack: Middleware、すべてのnext/fontオプション、Server Componentsでのストリーミングのサポートが追加され、ベータ版に近づいています（デモを見る）。vercel.comやnextjs.orgなどの成熟したNext.jsアプリでのdogfoodingで発見された追加のバグも修正しました。詳細。
next.config.jsのFast Refresh: next.config.jsへの変更により、ローカル開発サーバーが自動的に再起動されるようになりました。これは.env、.env.*、jsconfig.json、tsconfig.json設定ファイルの自動リロードを拡張します。
アクセシビリティ: App Routerにpagesからのルートアナウンスが含まれるようになりました。この機能は、クライアント側のルート遷移をスクリーンリーダーやその他の支援技術にアナウンスします。詳細。
静的型付きリンク: next.config.jsで設定されたredirectsとrewritesが型チェック中に考慮されるようになりました。詳細。
create-next-appのTailwind CSS: npx create-next-app@latestで新しいプロジェクトを開始する際、Tailwind CSSをオプションで選択するか、--tailwindフラグを使用してこのスタイリングソリューションでアプリケーションを事前設定できるようになりました。
Route Handlers: サポートされているHTTP動詞の代わりにexport defaultを使用すると、route.tsで役立つエラーがスローされるようになりました。Route Handlersの詳細。
画像: next/imageがfetchPriority="high"属性をサポートするようになりました。
メタデータ: 13.2で非推奨となった以前のメタデータAPI（head.js）が削除されました。代わりに、Metadata APIを通じたSEOの組み込みサポートを使用してください。
ルーティングからフォルダを除外: フォルダに_をプレフィックスとして付けることで、そのフォルダとすべての子セグメントをルーティングから除外できます。例えば、app/_dashboard/page.tsxはルーティング可能ではありません。
App Router: 指定されたルートセグメントの動的パラメータを読み取るための新しいuseParamsクライアントコンポーネントフックが追加されました。詳細。
スタイルシート読み込みの改善: Next.jsはReactのSuspensey CSSを実装し、CSS読み込みとスタイルなしコンテンツのフラッシュ、特にナビゲーション中の多くの問題を修正しました。
Not Found処理の改善: 予期されるnotFound()エラーをキャッチすることに加えて、ルートのapp/not-found.jsファイルはアプリケーション全体の一致しないURLも処理します。これは、アプリで処理されないURLを訪問したユーザーにapp/not-found.jsファイルでエクスポートされたUIが表示されることを意味します。詳細。
クライアント側ルーターキャッシュの改善: router.refresh()がキャッシュ全体を無効化し、検索パラメータが

Summary

Summary

Key Points

Installation

Translations

Next.js 13.3

File-Based Metadata API

Dynamic Open Graph Image Generation

Static Export for App Router

Parallel Routes and Interception

その他の改善