Next.js 14.1

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

• セルフホスティングの改善: 新しいドキュメントとカスタムキャッシュハンドラ
• Turbopackの改善: next dev --turboで5,600のテストをパス
• 開発者体験の改善: エラーメッセージの改善、pushStateとreplaceStateのサポート
• 並列＆インターセプトルート: フィードバックに基づく20のバグ修正
• next/imageの改善: <picture>タグ、アートディレクション、ダークモードのサポート

今日アップグレードするか、以下で新規プロジェクトを開始できます：

npx create-next-app@latest

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

Node.jsサーバー、Dockerコンテナ、または静的エクスポートを使用したNext.jsのセルフホスティング方法について、より明確な説明を求めるフィードバックを受けました。以下のドキュメントを全面改訂しました：

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

Next.js 14.1では、App Routerの増分的静的再生成（ISR）とより細かいデータキャッシュのためのカスタムキャッシュハンドラの提供も安定化しました：

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

Kubernetesのようなコンテナオーケストレーションプラットフォームを使用する場合、各ポッドがキャッシュのコピーを持つため、この設定を使用することが重要です。カスタムキャッシュハンドラを使用することで、Next.jsアプリケーションをホストするすべてのポッド間で一貫性を確保できます。

例えば、RedisやMemcachedなど、どこにでもキャッシュ値を保存できます。@neshcaによるRedisキャッシュハンドラアダプタと例を提供してくれたことに感謝します。

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.devを含むすべてのVercelのNext.jsアプリケーションで、next dev --turboの実際の使用を継続しています。これらのアプリケーションに取り組むすべてのエンジニアが毎日Turbopackを使用しています。

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

パフォーマンス

大規模なNext.jsアプリケーションであるvercel.comでは、以下の結果が見られました：

• ローカルサーバー起動時間が最大76.7%高速化
• Fast Refreshによるコード更新が最大96.3%高速化
• キャッシュなしの初期ルートコンパイルが最大45.8%高速化（Turbopackにはまだディスクキャッシュがありません）

v0.devでは、ReactクライアントコンポーネントがTurbopackで発見されバンドルされる方法を最適化する機会を特定し、その結果**最大61.5%**の初期コンパイル時間の高速化を実現しました。このパフォーマンス改善はvercel.comでも確認されました。

今後の改善

Turbopackには現在、Fast Refreshの増分コンパイル時間を改善するインメモリキャッシュがあります。

ただし、このキャッシュはNext.js開発サーバーを再起動すると保持されません。Turbopackパフォーマンスの次の大きなステップは、開発サーバーを再起動してもキャッシュが保持されるディスクキャッシュです。

開発者体験の改善

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

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

• 以前はwebpack-internalのようなバンドラエラーが表示されていたエラーが、適切にエラーのソースコードと影響を受けるファイルを表示するようになりました。
• クライアントコンポーネントでエラーが発生した後、エディタでエラーを修正しても、エラー画面がクリアされず、ハードリロードが必要でした。例えば、クライアントコンポーネントからmetadataをエクスポートしようとした場合など、このようなケースの多くを修正しました。

例えば、これは以前のエラーメッセージでした：

Next.js 14でのfetch呼び出しからのエラーの例

Next.js 14.1では以下のように改善されました：

レンダリング中のfetch呼び出しからのエラーが、エラーのソースコードと影響を受けるファイルを表示するようになりました

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')}>昇順で並べ替え</button>
      <button onClick={() => updateSorting('desc')}>降順で並べ替え</button>
    </>
  );
}

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

データキャッシュのロギング

Next.jsアプリケーションでnext dev実行時にキャッシュされたデータの可観測性を向上させるため、logging設定オプションにいくつかの改善を加えました。

キャッシュが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の使用
• キャンバスのcontext.drawImage()やnew Image()の使用
• <picture>のメディアクエリを使用したアートディレクションやライト/ダークモード画像の実装

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'ヒーロー画像', 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()について詳しく学ぶ。

パラレルルート＆インターセプトルート

Next.js 14.1では、パラレルルートとインターセプトルートに20の改善を加えました。

過去2回のリリースでは、Next.jsのパフォーマンスと信頼性の向上に注力してきました。皆様からのフィードバックに基づき、パラレルルートとインターセプトルートに多くの改善を加えることができました。特に、キャッチオールルートとサーバーアクションのサポートを追加しました。

• パラレルルートでは、同じレイアウト内で複数のページを同時または条件付きでレンダリングできます。ダッシュボードやソーシャルサイトのフィードなど、アプリの動的なセクションで複雑なルーティングパターンを実装するのに適しています。
• インターセプトルートでは、アプリケーションの別の部分から現在のレイアウト内にルートを読み込めます。例えば、フィード内の写真をクリックすると、写真がモーダルで表示され、フィードの上に重なります。この場合、Next.jsは/photo/123ルートをインターセプトし、URLをマスクして/feedの上に重ねて表示します。

パラレルルートとインターセプトルートについて詳しく学ぶか、サンプルを確認してください。

その他の改善点

14.0以降、コミュニティから多くの高評価を得たバグを修正しました。

また最近、キャッシングの解説やApp Routerでのよくある間違いについての動画を公開しました。参考になるかもしれません。

• [ドキュメント] リダイレクトに関する新しいドキュメント
• [ドキュメント] テストに関する新しいドキュメント
• [ドキュメント] プロダクション用チェックリストの新しいドキュメント
• [機能] next/third-partiesに<GoogleAnalytics />コンポーネントを追加（ドキュメント）
• [改善] create-next-appがより軽量でインストールが高速化（PR）
• [改善] ネストされたルートでエラーが発生してもglobal-errorでキャッチ可能に（PR）
• [改善] サーバーアクション内で使用するredirectがbasePathを尊重（PR）
• [改善] App Routerでのnext/scriptとbeforeInteractiveの使用を修正（PR）
• [改善] @aws-sdkとlodashを自動トランスパイルしてルート起動を高速化（PR）
• [改善] next devとnext/fontでのスタイル未適用コンテンツのちらつきを修正（PR）
• [改善] notFoundエラーをセグメントのエラーバウンダリを超えて伝播（PR）
• [改善] Pages Routerのi18nでロケールドメインから公開ファイルを配信する問題を修正（PR）
• [改善] 無効なrevalidate値が渡された場合にエラーを発生（PR）
• [改善] Windowsで作成されたビルドのLinuxマシンでのパス問題を修正（PR）
• [改善] basePathを使用したマルチゾーンアプリでのFast Refresh/HMRを修正（PR）
• [改善] 終了シグナルからのグレースフルシャットダウンを改善（PR）
• [改善] 異なるルートからインターセプトした際のモーダルルート衝突を修正（PR）
• [改善] basePath設定使用時のインターセプトルートを修正（PR）
• [改善] パラレルスロット不足による404時に警告を表示（PR）
• [改善] キャッチオールルートとのインターセプトルート使用を改善（PR）
• [改善] revalidatePathとのインターセプトルート使用を改善（PR）
• [改善] パラレルルートでの@childrenスロット使用を修正（PR）
• [改善] パラレルルートでのparams使用時のTypeErrorを修正（PR）
• [改善] デフォルトパラレルルートのキャッチオールルート正規化を修正（PR）
• [改善] next buildサマリーでのパラレルルート表示を修正（PR）
• [改善] インターセプトルート使用時のルートパラメータ表示を修正（PR）
• [改善] 深くネストされたパラレル/インターセプトルートを改善（PR）
• [改善] ルートグループと組み合わせたインターセプトルートの404を修正（PR）
• [改善] サーバーアクション/ルーターキャッシュ再検証とのパラレルルートを修正（PR）
• [改善] インターセプトルートとのrewrites使用を修正（PR）
• [改善] サードパーティライブラリからのサーバーアクションが動作（PR）
• [改善] ESMパッケージ内でNext.jsが使用可能に（PR）
• [改善] Material UIなどのライブラリ向けバレルファイル最適化（PR）
• [改善] 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ドキュメント: Delba, Steph, Michael, Lee

そして以下のコントリビューターの皆様: @OlehDutchenko, @eps1lon, @ebidel, @janicklas-ralph, @JohnPhamous, @chentsulin, @akawalsky, @BlankParticle, @dvoytenko, @smaeda-ks, @kenji-webdev, @rv-david, @icyJoseph, @dijonmusters, @A7med3bdulBaset, @jenewland1999, @mknichel, @kdy1, @housseindjirdeh, @max-programming, @redbmk, @SSakibHossain10, @jamesmillerburgess, @minaelee, @officialrajdeepsingh, @LorisSigrist, @yesl-kim, @StevenKamwaza, @manovotny, @mcexit, @remcohaszing, @ryo-manba, @TranquilMarmot, @vinaykulk621, @haritssr, @divquan, @IgorVaryvoda, @LukeSchlangen, @RiskyMH, @ash2048, @ManuWeb3, @msgadi, @dhayab, @ShahriarKh, @jvandenaardweg, @DestroyerXyz, @SwitchBladeAK, @ianmacartney, @justinh00k, @tiborsaas, @ArianHamdi, @li-jia-nan, @aramikuto, @jquinc30, @samcx, @Haosik, @AkifumiSato, @arnabsen, @nfroidure, @clbn, @siddtheone, @zbauman3, @anthonyshew, @alexfradiani, @CalebBarnes, @adk96r, @pacexy, @hichemfantar, @michaldudak, @redonkulus, @k-taro56, @mhughdo, @tknickman, @shumakmanohar, @vordgi, @hamirmahal, @gaspar09, @JCharante, @sjoerdvanBommel, @mass2527, @N-Ziermann, @tordans, @davidthorand, @rmathew8-gh, @chriskrogh, @shogunsea, @auipga, @SukkaW, @agustints, @OXXD, @clarencepenz, @better-salmon, @808vita, @coltonehrman, @tksst, @hugo-syn, @JakobJingleheimer, @Willem-Jaap, @brandonnorsworthy, @jaehunn, @jridgewell, @gtjamesa, @mugi-uno, @kentobento, @vivianyentran, @empflow, @samennis1, @mkcy3, @suhaotian, @imevanc, @d3lm, @amannn, @hallatore, @Dylan700, @mpsq, @mdio, @christianvuerings, @karlhorky, @simonhaenisch, @olci34, @zce, @LavaToaster, @rishabhpoddar, @jirihofman, @codercor, @devjiwonchoi, @JackieLi565, @thoushif, @pkellner, @jpfifer, @quisido, @tomfa, @raphaelbadia, @j9141997, @hongaar, @MadCcc, @luismulinari, @dumb-programmer, @nonoakij, @franky47, @robbertstevens, @bryndyment, @marcosmartini, @functino, @Anisi, @AdonisAgelis, @seangray-dev, @prkagrawal, @heloineto, @kn327, @ihommani, @MrNiceRicee, @falsepopsky, @thomasballinger, @tmilewski, @Vadman97, @dnhn, @RodrigoTomeES, @sadikkuzu, @gffuma, @Schniz, @joulev, @Athrun-Judah, @rasvanjaya21, @rashidul0405, @nguyenbry, @Mwimwii, @molebox, @mrr11k, @philwolstenholme, @IgorKowalczyk, @Zoe-Bot, @HanCiHu, @JackHowa, @goncy, @hirotomoyamada, @pveyes, @yeskunall, @ChendayUP, @hmaesta, @ajz003, @its-kunal, @joelhooks, @blurrah, @tariknh, @Vinlock, @Nayeem-XTREME, @aziyatali, @aspehler, @moka-ayumu