Next.js 14.1

2024年1月18日（木）投稿者：Jiachi Liu (@huozhi)、Jimmy Lai (@feedthejim)

Next.js 14.1には以下の開発者体験の改善が含まれています：

• セルフホスティングの改善: 新しいドキュメントとカスタムキャッシュハンドラー
• Turbopackの改善: next dev --turboで5,600のテストが通過
• DXの改善: エラーメッセージの改善、pushStateとreplaceStateのサポート
• Parallel & Intercepted Routes: フィードバックに基づく20のバグ修正
• next/imageの改善: <picture>、アートディレクション、ダークモードサポート

今すぐアップグレードするか、以下で開始してください：

npx create-next-app@latest

セルフホスティングの改善

Node.jsサーバー、Dockerコンテナ、または静的エクスポートでNext.jsをセルフホストする方法についての明確性向上に関するフィードバックをお聞きしました。以下についてセルフホスティングドキュメントを全面的に見直しました：

• ランタイム環境変数
• ISRのカスタムキャッシュ設定
• カスタム画像最適化
• ミドルウェア

Next.js 14.1では、Incremental Static RegenerationとApp Routerのより細かいData Cacheのカスタムキャッシュハンドラーの提供も安定化しました：

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // デフォルトのインメモリキャッシュを無効化
};

この設定をセルフホスティング時に使用することは、各ポッドがキャッシュのコピーを持つKubernetesなどのコンテナオーケストレーションプラットフォームを使用する際に重要です。カスタムキャッシュハンドラーを使用することで、Next.jsアプリケーションをホストするすべてのポッド間での一貫性を確保できます。例えば、RedisやMemcachedなど、どこにでもキャッシュされた値を保存できます。

Redisキャッシュハンドラーアダプターと例を提供してくれた@neshcaに感謝します。

Turbopackの改善

ローカルNext.js開発の信頼性とパフォーマンスに引き続き焦点を当てています：

• 信頼性: TurbopackがNext.js開発テストスイート全体を通過し、Vercelのアプリケーションでドッグフーディング
• パフォーマンス: Turbopackの初期コンパイル時間とFast Refresh時間の改善
• メモリ使用量: Turbopackのメモリ使用量の改善

next dev --turboは今後のリリースで安定化予定で、引き続きオプトインとなります。

信頼性

Turbopackを使用したNext.jsは現在**5,600の開発テスト（94%）**を通過しており、前回の更新から600増加しました。進捗状況はareweturboyet.comで確認できます。

vercel.comやv0.appを含む、VercelのすべてのNext.jsアプリケーションでnext dev --turboのドッグフーディングを継続しています。これらのアプリケーションで作業するすべてのエンジニアが日常的にTurbopackを使用しています。

Turbopackを使用する非常に大規模なNext.jsアプリケーションで多くの問題を発見し修正しました。これらの修正について、Next.jsの既存の開発テストスイートに新しいテストを追加しました。

パフォーマンス

大規模なNext.jsアプリケーションであるvercel.comでは、以下を確認しました：

• ローカルサーバー起動が最大76.7%高速化
• Fast Refreshでのコード更新が最大96.3%高速化
• キャッシュなしでの初期ルートコンパイルが最大45.8%高速化（Turbopackはまだディスクキャッシュを持っていません）

v0.appでは、TurbopackでReact Client Componentsが発見され、バンドルされる方法を最適化する機会を特定し、初期コンパイル時間が最大61.5%高速化されました。このパフォーマンス改善はvercel.comでも観察されました。

今後の改善

Turbopackは現在インメモリキャッシュを持っており、Fast Refreshの増分コンパイル時間を改善します。しかし、キャッシュは現在Next.js開発サーバーの再起動時に保持されません。Turbopackパフォーマンスの次の大きなステップはディスクキャッシュで、開発サーバーの再起動時にキャッシュを保持できるようになります。

開発者体験の改善

エラーメッセージとFast Refreshの改善

ローカル開発体験において明確なエラーメッセージがいかに重要かを理解しています。next dev実行時に表示されるスタックトレースとエラーメッセージの品質を改善するため、多くの修正を行いました。

以前はwebpack-internalなどのバンドラーエラーを表示していたエラーが、適切にエラーのソースコードと影響を受けるファイルを表示するようになりました。

クライアントコンポーネントでエラーを確認し、エディターでエラーを修正した後、Fast Refreshがエラー画面をクリアしませんでした。ハードリロードが必要でした。これらのインスタンスの多くを修正しました。例えば、Client Componentからmetadataをエクスポートしようとする場合などです。

window.history.pushStateとwindow.history.replaceState

App Routerで、ページをリロードすることなくブラウザの履歴スタックを更新するネイティブのpushStateとreplaceStateメソッドの使用が可能になりました。

pushStateとreplaceStateの呼び出しはNext.js App Routerに統合され、usePathnameとuseSearchParamsと同期できます。これは、フィルター、ソート順序、またはリロード間で持続させたいその他の情報などの状態を保存する際にURLを即座に更新する必要がある場合に役立ちます。

'use client';

import { useSearchParams } from 'next/navigation';

export default function SortProducts() {
  const searchParams = useSearchParams();

  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }

  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  );
}

Next.jsでのネイティブHistory APIの使用について詳しく学ぶ。

Data Cacheログ

next dev実行時のNext.jsアプリケーションでキャッシュされたデータの可観測性向上のため、ログ設定オプションに多くの改善を行いました。キャッシュのHITまたはSKIPと要求された完全なURLを表示できるようになりました：

GET / 200 in 48ms
✓ Compiled /fetch-cache in 117ms
GET /fetch-cache 200 in 165ms
│ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
✓ Compiled /fetch-no-store in 150ms
GET /fetch-no-store 200 in 548ms
│ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
│ │ Cache missed reason: (cache: no-store)

これはnext.config.jsで有効にできます：

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

next/imageの<picture>とアートディレクションサポート

Next.js Imageコンポーネントは、<Image>を直接使用する必要のないgetImageProps()（安定版）を通じて、より高度なユースケースをサポートするようになりました。これには以下が含まれます：

• background-imageまたはimage-setでの作業
• canvas context.drawImage()またはnew Image()での作業
• アートディレクションやライト/ダークモード画像を実装するための<picture>メディアクエリでの作業

import { getImageProps } from 'next/image';

export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({
    ...common,
    src: '/dark.png',
  });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({
    ...common,
    src: '/light.png',
  });

  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

getImageProps()について詳しく学ぶ。

Parallel & Intercepted Routes

Next.js 14.1では、Parallel & Intercepted Routesに20の改善を行いました。過去2回のリリースでは、Next.jsのパフォーマンスと信頼性の改善に焦点を当ててきました。フィードバックに基づいてParallel & Intercepted Routesに多くの改善を行うことができました。特に、catch-allルートとServer Actionsのサポートを追加しました。

Parallel Routesを使用すると、同じレイアウト内で1つ以上のページを同時にまたは条件付きでレンダリングできます。ダッシュボードやソーシャルサイトのフィードなど、アプリの高度に動的なセクションでは、Parallel Routesを使用して複雑なルーティングパターンを実装できます。

Intercepted Routesを使用すると、現在のレイアウト内でアプリケーションの別の部分からルートを読み込むことができます。例えば、フィード内の写真をクリックすると、フィードにオーバーレイしてモーダルで写真を表示できます。この場合、Next.jsは/photo/123ルートをインターセプトし、URLをマスクして/feedの上にオーバーレイします。

Parallel & Intercepted Routesについて詳しく学ぶか、例を表示する。

その他の改善

14.0以降、コミュニティから高く評価されたバグの多くを修正しました。また、最近、キャッシュとApp Routerでのよくある間違いについて説明する動画も公開しており、参考になるかもしれません。

• [Docs] リダイレクトに関する新しいドキュメント
• [Docs] テストに関する新しいドキュメント
• [Docs] プロダクションチェックリストを含む新しいドキュメント
• [Feature] next/third-partiesに<GoogleAnalytics />コンポーネントを追加（ドキュメント）
• [Improvement] create-next-appがより小さく、インストールが高速に（PR）
• [Improvement] エラーをスローするネストされたルートでもglobal-errorでキャッチ可能（PR）
• [Improvement] サーバーアクションで使用時にredirectがbasePathを尊重（PR）
• [Improvement] App Routerでのnext/scriptとbeforeInteractiveの使用を修正（PR）
• [Improvement] より高速なルート起動のため@aws-sdkとlodashを自動トランスパイル（PR）
• [Improvement] next devとnext/fontでのスタイル未適用コンテンツのフラッシュを修正（PR）
• [Improvement] セグメントのエラー境界を越えてnotFoundエラーを伝播（PR）
• [Improvement] Pages Router i18nでロケールドメインからのpublicファイル提供を修正（PR）
• [Improvement] 無効なrevalidate値が渡された場合のエラー（PR）
• [Improvement] windowsで作成されたビルドをlinuxマシンで実行する際のパス問題を修正（PR）
• [Improvement] basePathを使用したマルチゾーンアプリでのFast Refresh / HMRを修正（PR）
• [Improvement] 終了シグナルからの優雅なシャットダウンを改善（PR）
• [Improvement] 異なるルートからインターセプトする際のモーダルルートの競合（PR）
• [Improvement] basePath設定使用時のインターセプトルートを修正（PR）
• [Improvement] 不足している並列スロットが404になる場合の警告表示（PR）
• [Improvement] catch-allルートと使用時のインターセプトルートを改善（PR）
• [Improvement] revalidatePathと使用時のインターセプトルートを改善（PR）
• [Improvement] 並列ルートでの@childrenスロットの使用を修正（PR）
• [Improvement] 並列ルートでparamsを使用する際のTypeErrorを修正（PR）
• [Improvement] デフォルト並列ルートのcatch-allルート正規化を修正（PR）
• [Improvement] next buildサマリーでの並列ルート表示を修正（PR）
• [Improvement] インターセプトルート使用時のルートパラメーターを修正（PR）
• [Improvement] 深くネストされた並列/インターセプトルートを改善（PR）
• [Improvement] ルートグループと組み合わせたインターセプトルートでの404を修正（PR）
• [Improvement] サーバーアクション/ルーターキャッシュ再検証での並列ルートを修正（PR）
• [Improvement] インターセプトルートでのrewritesの使用を修正（PR）
• [Improvement] サードパーティライブラリからのServer Actionsが動作（PR）
• [Improvement] ESMパッケージ内でのNext.js使用が可能（PR）
• [Improvement] Material UIなどのライブラリのバレルファイル最適化（PR）
• [Improvement] SuspenseなしでuseSearchParamsを不正使用した場合のビルド失敗（PR）

貢献者

Next.jsは、3,000人を超える個人開発者、GoogleやMetaなどの業界パートナー、そしてVercelのコアチームの共同作業の結果です。GitHub Discussions、Reddit、Discordでコミュニティに参加してください。

このリリースは以下の方々によってもたらされました：

Next.jsチーム：Andrew、Balazs、Jiachi、Jimmy、JJ、Josh、Sebastian、Shu、Steven、Tim、Wyatt、Zack

Turbopackチーム：Donny、Leah、Maia、OJ、Tobias、Will

Next.js Docs：Delba、Steph、Michael、Lee

そして以下の方々の貢献：@OlehDutchenko、@eps1lon、@