Next.js 13.2

投稿者: Casey Gowrie @ GowrieCasey、Jimmy Lai @ feedthejim、Luba Kravchenko @ lubakravche、Tim Neutkens @ timneutkens

Next.js 13.2では、安定性に向けた準備としてApp Router（app）に大幅な改善が含まれています：

• 組み込みSEOサポート: 静的および動的メタタグを設定する新しいMetadata API
• Route Handlers: Web RequestとResponseに基づいて構築されたカスタムリクエストハンドラー
• Server Components用MDX: ReactコンポーネントをMarkdown内で使用、サーバーサイドのみ
• Rust MDXパーサー: 全く新しいRustプラグインによる高速なMarkdownパース
• 改善されたエラーオーバーレイ: 読みやすさを向上させるためのNext.jsとReactスタックトレースの分離
• 静的型付きリンク（Beta）: next/linkとTypeScriptでリンク切れを防止
• Turbopackの改善（Alpha）: Webpackローダーとの互換性と改善されたサポート
• Next.js Cache（Beta）: プログレッシブISRとコード変更の高速再デプロイ

今すぐ以下を実行してアップデートしてください：

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

新しいMetadata APIによる組み込みSEOサポート

Next.jsは当初から検索エンジンの最適化を可能にするよう設計されています。事前レンダリングされたHTMLコンテンツの提供は、検索エンジンのインデックス作成を改善するだけでなく、アプリケーションのパフォーマンスも向上させます。

Next.jsは多くのバージョンでアプリケーション内のメタデータを変更するためのシンプルなAPI（next/head）を提供してきましたが、App Router（app）での検索エンジン最適化の方法を再設計し、強化したいと考えました。

新しいMetadata APIを使用すると、Server ComponentであるレイアウトやページでメタデータExplicitなメタデータ設定でメタデータ（例：HTMLのhead要素内のmetaタグやlinkタグ）を定義できます。

// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};

このAPIはシンプルで構成可能であり、ストリーミングサーバーレンダリングと互換性があるよう設計されています。例えば、アプリケーション全体のルートレイアウトで共通のメタデータ属性を設定し、アプリケーション内の他のルートでメタデータオブジェクトを構成・マージできます。これには動的メタデータと静的メタデータの両方のサポートが含まれます：

// layout.js / page.js
// 静的メタデータ
export const metadata = {
  title: '...',
};

// 動的メタデータ
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return {
    title: product.title
  };
}

TypeScriptプラグインまたはMetadata型の追加によるTypeScriptサポートを含む、カスタムメタデータの提供機能を含むすべてのメタデータオプションが利用可能です。例えば、メタデータを通じてOpen Graphイメージを定義できます：

// app/layout.tsx
export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png',
        width: 800,
        height: 600,
      },
    ],
    locale: 'en-US',
    type: 'website',
  },
};

export default function Layout({ children }) {}

Metadata APIは13.2でApp Router（app）用に利用可能で、以前のhead.js特別ファイルを置き換えます。pagesディレクトリでは利用できません。

SEOについて詳しく学ぶか、MetadataのAPIリファレンスをご覧ください。

コミュニティパッケージでの作業と初期API設計へのフィードバックについて、next-seoに感謝いたします。

カスタムRoute Handlers

App Router（app）の元のベータリリースで欠けていた部分の1つは、pages/apiディレクトリに存在するAPI Routesでした。この機会を利用して、appの新しいルーティングシステムに深く統合された、より現代的なバージョンのAPI Routesを作成したいと考えました。

Route HandlersはWeb RequestとResponse APIを使用して、指定されたルートのカスタムリクエストハンドラーを作成できます。

// app/example/route.ts
export async function GET(request: Request) {}

Route Handlersは、ストリーミングレスポンスのサポートを含む、EdgeとNode.jsランタイムの両方をシームレスにサポートするアイソモーフィックAPIを持っています。Route Handlersはページやレイアウトと同じルートセグメント設定を使用するため、汎用的な静的レンダリングや再検証などの長く待ち望まれた機能をサポートします。

route.tsファイルは、HTTPメソッド名で命名された非同期関数をエクスポートできます：GET、HEAD、OPTIONS、POST、PUT、DELETE、PATCH。これらの関数は、カスタムルートロジック用のヘルパー/再利用可能なロジックを作成するためにラップし、抽象化できます。

cookiesやheadersなどの他のサーバー関数は、これらの抽象化が構築されているWeb APIと共にRoute Handlers内で使用できます。これにより、Server ComponentsとRoute Handlers間でコードを共有できます。

// app/example/route.ts
import { cookies } from 'next/headers';

export async function GET(request: Request) {
  const cookieStore = cookies();
  const token = cookieStore.get('token');

  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': `token=${token}` },
  });
}

Route Handlersは13.2でApp Router（app）用にroute.ts特別ファイルを使用して利用可能です。これらはAPI Routesの置き換えであるため、pagesディレクトリでは利用できません。

Route Handlersについて詳しく学ぶか、APIリファレンスをご覧ください。

先行技術とインスピレーションについて、SvelteKitに感謝いたします。

Server Components用MDX

MDXはMarkdownファイル内で直接JSXを記述できるMarkdownのスーパーセットです。動的なインタラクティビティを追加し、コンテンツ内にReactコンポーネントを埋め込む強力な方法です。

13.2では、MDXをReact Server Componentsで完全に使用できるようになりました。これは、Reactの強力なテンプレート機能を保持しながら、動的UIのためのクライアントサイドJavaScriptを減らし、ページロードを高速化することを意味します。必要に応じてMDXコンテンツにインタラクティビティを追加できます。

@next/mdxプラグインは、カスタムコンポーネントを提供するためにアプリケーションのルートで定義される新しい特別ファイルmdx-components.js|tsのサポートで更新されました：

// your-project/mdx-components.js
// このファイルでは、MDXファイルで使用するカスタムReactコンポーネントを
// 提供できます。他のライブラリのコンポーネントを含む、
// 任意のReactコンポーネントをインポートして使用できます。

function H1({ children }) {
  // ...
}

function H2({ children }) {
  // ...
}

export function useMDXComponents(components) {
  return {
    h1: H1,
    h2: H2,
    ...components
  };
}

さらに、MDXコンテンツを取得するためのコミュニティパッケージnext-mdx-remoteとcontentlayerと協力して、React Server Componentsのサポートを追加しました。

Server ComponentsでMDXをセットアップする方法について詳しく学ぶか、サンプルをデプロイしてください。

Rust MDXパーサー

Server Components用MDXを有効にする一環として、パフォーマンスを向上させるためにMDXパーサーをRustで書き直しました。これは、大量のMDXファイルを処理する際に顕著な速度低下が見られた以前のJavaScriptベースのパーサーからの大幅な改善です。

next.config.jsでRustパーサーの使用をオプトインできます。例えば、@next/mdxの場合：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    mdxRs: true,
  },
};

const withMDX = require('@next/mdx')();
module.exports = withMDX(nextConfig);

このプロジェクトに取り組むためにスポンサーしたTitus Wormerに感謝いたします。Next.js外でこれを使用したい場合は、新しいパッケージmdxjs-rsをチェックしてください。

静的型付きリンク

Next.jsは、next/linkを使用する際のタイポやその他のエラーを防ぐために、appディレクトリ内のリンクを静的に型付けできるようになり、ページ間のナビゲーション時の型安全性が向上しました。

import Link from 'next/link'

// ✅
<Link href="/about" />
// ✅
<Link href="/blog/nextjs" />
// ✅
<Link href={`/blog/${slug}`} />
// ❌ hrefが有効なルートでない場合、TypeScriptエラー
<Link href="/aboot" />

この機能には新しいApp RouterとTypeScriptの使用が必要です。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    typedRoutes: true,
  },
};

module.exports = nextConfig;

この機能は現在ベータ版で利用可能です。rewritesとredirectsはまだサポートされていません。

静的型付きルートについて詳しく学ぶ

改善されたエラーオーバーレイ

エラーの読みやすさとデバッグ可能性を向上させるため、Next.jsエラーオーバーレイに多くの改善を加えました。

13.2では、Next.jsとReactのスタックトレースが分離され、エラーの発生源を特定しやすくなりました。さらに、エラーオーバーレイには現在のNext.jsバージョンが表示され、バージョンが最新かどうかを理解するのに役立ちます。

また、Reactハイドレーションエラーのエラー出力も改善され、より読みやすく、デバッグしやすくなりました。

Turbopackの改善

Next.js 13でアルファ版として発表されたTurbopackは、ローカル開発と将来の本番ビルドの両方を高速化するよう設計されたインクリメンタルバンドラーです。ベータ版に向けて、既存のNext.js機能のTurbopackサポートと全体的な安定性の向上に焦点を当てています。

前回のリリース以降、以下を追加しました：

• next/dynamicのサポート
• next.config.jsでのrewrites、redirects、headers、pageExtensionsのサポート
• pagesでの404とエラーのサポート
• CSS modules composes: ... from ...のサポート
• Fast Refreshの信頼性とエラー回復の改善
• CSS優先順位処理の改善
• コンパイル時評価の改善

また、最大規模の内部Next.jsアプリケーションと初期Vercelカスタマーでのdogfoodingを通じて、多くのバグを修正し、安定性を向上させました。

Webpackローダーによるカスタムファイル変換

Turbopackは、一部のwebpackローダーのサポートと互換性を提供するようになりました。これは、Webpackエコシステムの多くのローダーを使用して、異なるタイプのファイルをJavaScriptに変換できることを意味します。@mdx-js/loader、@svgr/webpack、babel-loaderなどのローダーがサポートされています。

Turbopackのカスタマイズについて詳しく学ぶ

例えば、experimental.turbo.loadersを使用して各ファイル拡張子のローダーリストを設定します：

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      loaders: {
        '.md': [
          {
            // オプション形式
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        '.svg': ['@svgr/webpack'],
      },
    },
  },
};

完全な例については、ローダーを使用するTurbopackサンプルをチェックしてください。

Webpack形式のResolveエイリアス

Turbopackは、webpackのresolve.aliasと同様に、エイリアスを通じてモジュール解決を変更するよう設定できるようになりました。experimental.turbo.resolveAliasを通じて設定します：

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
};

Next.js Cache

Next.js 13.2では、新しいNext.js Cache（ベータ）を導入します。これはISRの進化版で、以下を実現します：

• コンポーネントレベルでのプログレッシブISR
• ネットワークリクエストなしでの高速リフレッシュ
• 静的ページへのコード変更の高速再デプロイ

完全に静的なページの場合、ISRは今日と同じように動作します。より細かいデータ取得を持つページ、静的と動的を混在させるページの場合、Next.js Cacheはより細かく、一時的なキャッシュを使用します。

React Server Componentsの基盤とNext.js App Router（app）での併置されたデータ取得により、静的または動的データをそれを消費するコンポーネントと一緒にカプセル化できるようになりました。

// app/page.jsx
export default async function Page() {
  const [staticData, dynamicData, revalidatedData] = await Promise.all([
    // 手動で無効化されるまでキャッシュ
    fetch(`https://...`),
    // リクエストごとに再取得
    fetch(`https://...`, { cache: 'no-store' }),
    // 10秒の有効期限でキャッシュ
    fetch(`https://...`, { next: { revalidate: 10 } }),
  ]);
}