Next.js 12.1

2022年2月17日（木）に投稿

投稿者: Balázs Orbán、DongYoon Kang、Gerald Monaco、Javi Velasco、Jiachi Liu、JJ Kasper、Joe Haddad、Kara Erickson、Maia Teegarden、Shu Ding、Steven、Tim Neutkens、Tobias Koppers

Next.js 12.1では、最もリクエストの多かった機能の一つをリリースできることを嬉しく思います：

• オンデマンドISR（ベータ版）: getStaticPropsを使用するページを即座に再検証
• SWCサポートの拡張: styled-components、Relay、その他
• next/jest プラグイン: SWCを使用したゼロ設定のJestサポート
• SWCによる高速化されたMinification（RC）: Terserより7倍高速なminification
• セルフホスティングの改善: Dockerイメージが約80%小さく
• React 18 & Server Components（アルファ版）: 安定性とサポートの向上
• 開発者調査: フィードバックでNext.jsの改善にご協力ください

npm i next@latestを実行して今すぐアップデートしてください。

オンデマンドIncremental Static Regeneration（ベータ版）

Next.jsはunstable_revalidate()関数を公開し、getStaticPropsを使用する個別のページを再検証できるようになりました。これは、Next.js 9.5でIncremental Static Regeneration（ISR）を導入して以来、最もリクエストの多かった機能の一つでした。

ISRがリリースされて以来、Tripadvisor、Parachute、HashiCorpなどの企業が、素晴らしいパフォーマンスを維持しながらビルド時間を大幅に改善しているのを見てきました。しかし、間隔ベースの再検証に関するフィードバックをお聞きし、より柔軟性を提供できることを嬉しく思います。

現在、revalidate時間を60に設定すると、すべての訪問者は1分間、サイトの同じ生成されたバージョンを見ることになります。キャッシュを無効化する唯一の方法は、1分が経過した後に誰かがそのページを訪問することでした。

特定のページのNext.jsキャッシュをオンデマンドで手動でパージできるようになりました。これにより、以下の場合にサイトを更新しやすくなります：

• ヘッドレスCMSからのコンテンツが作成または更新された時
• Eコマースメタデータの変更（価格、説明、カテゴリ、レビューなど）

// pages/api/revalidate.js
export default async function handler(req, res) {
  // 有効なリクエストであることを確認するためのシークレットをチェック
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // エラーが発生した場合、Next.jsは最後に正常に生成されたページを
    // 引き続き表示します
    return res.status(500).send('Error revalidating');
  }
}

getStaticProps内では、オンデマンド再検証を使用するためにrevalidateを指定する必要はありません。revalidateが省略された場合、Next.jsはデフォルト値のfalse（再検証なし）を使用し、unstable_revalidate()が呼び出された時のみページを再検証します。

Incremental Static RegenerationはNext.js Build API（next build）をサポートするすべてのプロバイダーで動作します。本日からVercelにデプロイされた場合、オンデマンド再検証はページをエッジにプッシュする際に約300msでグローバルに伝播されます。

デモを見てオンデマンド再検証の動作を確認し、フィードバックを提供してください。Svix（エンタープライズ対応webhook）とClerk（認証）もオンデマンドISRのデモを作成しています。

SWCサポートの改善

すべてのNext.jsアプリケーションのプロダクションビルドを高速化し、ローカル開発で即座にフィードバックを得られるようにしたいと考えています。Next.js 12では、ネイティブコンパイルを活用する新しいRustベースのコンパイラを導入しました。

12.1では、Next.js Compilerに以下のサポートを追加しました：

• styled-components
• importSource
• legacy-decorators
• relay
• remove-react-properties
• remove-console

上記の6つの変換を追加することで、最も一般的なBabelプラグインを新しいコンパイラを使用してRustに移植しました。他に見たいプラグインがあれば、ディスカッションでお知らせください。

さらに、SWCを通じて有効化される高性能WebAssemblyプラグインのシステムに取り組んでいます。

ゼロ設定Jestプラグイン

Next.jsは、RustベースのNext.js Compilerを使用してファイルを変換し、Jestを自動的に設定するようになりました（next/jest）。以下が含まれます：

• スタイルシート（.css、.module.css、およびそれらの.scssバリアント）と画像インポートの自動モック
• .env（およびすべてのバリアント）をprocess.envに読み込み
• テスト解決と変換からnode_modulesを無視
• テスト解決から.nextを無視
• Next.jsコンパイラ変換を有効にするフラグのためのnext.config.jsの読み込み

詳細についてはドキュメントを確認するか、Jestの例から始めてください。

SWCによる高速化されたMinification

Next.js 12では、Next.js Compilerの一部としてSWCを使用したminificationを導入しました。初期の結果では、Terserより7倍高速であることが示されました。

SWCによるMinificationは12.1でRelease Candidate（RC）となり、12.2でデフォルトになります。next.config.jsでSWCをminificationに使用することをオプトインできます：

// next.config.js
module.exports = {
  swcMinify: true,
};

ディスカッションでフィードバックをお聞かせください。

高速化された画像最適化

組み込みの画像最適化APIが更新され、ISRページと同じパターンをサポートするようになりました。画像は古いものが提供され、バックグラウンドで再検証されます（stale-while-revalidateとも呼ばれます）。これは画像最適化の大幅なパフォーマンス向上です。

詳細については画像キャッシュ動作をご覧ください。

セルフホストNext.jsの改善

Next.jsは、プロダクションデプロイメントに必要なファイルのみをコピーするstandaloneフォルダを自動的に作成できるようになりました。これにより、セルフホストNext.jsアプリケーションのDockerイメージが約80%小さくなりました。

この自動コピーを活用するには、next.config.jsで有効にできます：

// next.config.js
module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

これにより.next/standaloneにフォルダが作成され、node_modulesをインストールすることなく単独でデプロイできます。

ドキュメントを確認するか、Dockerの例から始めてください。

環境に基づいて異なる.envファイルの読み込みをサポートするマルチ環境Dockerの例も用意しています。

React 18、Server Components、SSRストリーミング（アルファ版）

Next.js Confで示したように、React 18、Server-Side Suspense、Streaming SSR、そして最終的にはServer ComponentsをNext.jsに導入する作業を行っています。

Server Componentsは、サーバーとクライアントサイドのコードを分離することでJavaScriptバンドルサイズを削減できるReactの新機能です。Server Componentsにより、開発者はサーバーとクライアントにまたがるアプリを構築でき、クライアントサイドアプリの豊富なインタラクティビティと従来のサーバーレンダリングの改善されたパフォーマンスを組み合わせることができます。

Next.jsでServer Componentsのアルファからベータへの道のりをフォローしている開発者向けに、最近のアップデートをいくつか紹介します：

• 2回目のリクエストを避けるためのHTMLでのインラインServer Componentレスポンス
• React 18での部分ハイドレーションを可能にするストリーミング時のスクリプト読み込みの改善
• React 18の新しいuseId APIのサポート
• Server Componentとしての_appのサポート
• Server Componentsのコード分割の改善
• ストリーミングパフォーマンスの改善
• Node.jsとEdge間でデフォルトランタイムを変更する機能（RFC）

EdgeでサーバーレンダリングされるNext.jsアプリケーション全体を実行できるようにする作業を行っています。どのページがEdge Runtimeにオプトインするかを選択でき、準備ができたらNode.jsからページを段階的に移行できます。

Edge Runtimeについてより詳しく説明する別の投稿を近日中にリリース予定です。

両方のデモ（next-server-componentsとnext-rsc-demo）が最新の変更で更新されています。

その他のバグ修正と改善

• target="blank"を持つ<a>を使用してもESLintでnext/linkを使用するよう警告されなくなりました
• .d.tsファイルはもはやPagesとして扱われません
• スクリーンリーダーにページ変更を通知する際、document.titleがh1より優先されるようになりました
• pages/index/[...dynamic].jsの作成が可能になりました（以前はindexが予約キーワードのため不可能でした）
• dynamic(() => import('./some-component'), { ssr: false })を使用する際、インポートはサーバーコードから自動的にtreeshakenされます
• より小さなインストールサイズとセキュリティ向上のため、より多くの依存関係をプリコンパイルする作業を行っています。最新の追加はnode-fetchでした
• Middlewareを使用する際のFast Refreshの改善
• 組み込みESLint統合でのESLint 8のサポート
• styled-jsxが5.0にアップグレードされ、すべてのstyled-jsxコンパイルエラーに新しい有用なエラーリンクが含まれます
• Edge Runtime: AbortControllerとAbortSignalのサポート
• Edge Runtime: CryptoKeyとglobalThis.CryptoKeyを追加
• 大規模なNext.jsアプリケーションで最近の改善によりFast Refresh時間が約60%改善されています（1,000以上のモジュールが再読み込みされる場合）
• Fast Refreshが失敗してフルページリロードが発生した場合に通知が表示されるようになりました
• React 18 strict modeを使用する際、アナウンスされたルートが初期ページ読み込みのアナウンスを正しくスキップするようになりました
• 2021年12月と比較してNext.jsリポジトリのオープンイシュー数を約300減らしました（約1000のイシューを解決）

Next.js開発者調査

初回の開発者調査でフィードバックを共有し、Next.jsの改善にご協力ください。

この調査には2つの部分があります：8つの質問からなるクイック調査と、個別機能のフィードバックを詳しく聞く拡張調査です。時間があれば両方のセクションにご記入いただければ嬉しいですが、そうでなければ最初のセクション後に回答を送信していただいても構いません。

回答は完全に匿名ですが、お望みであればアプリのURLを共有することもできます。Next.jsの改善にご協力いただき、ありがとうございます！

貢献者の皆様へ感謝

Next.jsは、2,000人以上の個人開発者、GoogleやFacebookなどの業界パートナー、そして私たちのコアチームの共同作業の結果です。

貢献をより簡単にするため、ビルドパフォーマンスを向上させるためにNext.jsリポジトリをTurborepoを使用するよう移行しました。また、テストの作成を始めやすくするため、テストとエラーリンクのスキャフォールディングを追加しました。

最後に、Next.jsへの貢献方法を示す40分間のウォークスルービデオを録画しました。

このリリースは以下の貢献者の皆様によってもたらされました： @MaedahBatool、@mutebg、@sokra、@huozhi、@hanford、@shuding、@sean6bucks、@jameshfisher、@devknoll、@yuta-ike、@zh-lx、@amandeepmittal、@alunyov、@stefanprobst、@leerob、@balazsorban44、@kdy1、@brittanyrw、@jord1e、@kara、@vvo、@ismaelrumzan、@dlindenkreuz、@MohammadxAli、@nguyenyou、@thibautsabot、@hanneslund、@vertti、@KateKate、@stefee、@mikinovation、@Leticijak、@mohsen1、@ncphillips、@ehowey、@lancechentw、@krychaxp、@fmacherey、@pklawansky、@RyanClementsHax、@lakbychance、@sannajammeh、@oliviertassinari、@alexander-akait、@u-yas、@Cheprer、@msp5382、@chrispat、@getspooky、@Ryz0nd、@klaasman、@midgleyc、@kumard3、@jesstelford、@neeraj3029、@glenngijsberts、@pie6k、@wouterraateland、@timneutkens、@11koukou、@thesyedbasim、@aeneasr、@ijjk、@lfades、@JuniorTour、@xavhan、@mattyocode、@padmaia、@Skn0tt、@gwer、@Nutlope、@styfle、@stipsan、@xhoantran、@eolme、@sespinosa、@zenorocha、@hjaber、@benmvp、@T-O-R-U-S、@dburrows、@atcastle、@kiriny、@molebox、@Vienio99、@kyliau、@PepijnSenders、@krystofex、@PizzaPete、@souljuse、@Schniz、@Nelsonfrank、@Mhmdrza、@hideokamoto-stripe、@Emrin、@gr-qft、@delbaoliveira、@redbar0n、@lxy-yz、@Divlo、@kachkaev、@teleaziz、@OgbeniHMMD、@goncy、@bennettdams、@hsynlms、@callumgare、@jonrosner、@karaggeorge、@rpie3、@MartijnHols、@bashunaimiroy、@NOCELL、@rishabhpoddar、@omariosouto、@theMosaad、@javivelasco、@pierrenel、@lobsterkatie、@tharakabimal、@saevarb、@nbouvrette、@paulnbrd、@ecklf、@renbaoshuo、@chozzz、@tbezman、@karlhorky、@j-mendez、@ffan0811、@arthurfiorette、@chimit、@joperron、@moh12594、@rasmusjp、@bryanrsmith、@TrySound、@josharsh、@thecrypticace、@arturparkhisenko、@segheysens、@thevinter、@AryanBeezadhur、@xiaohp、@tknickman、@oriolcp、@smakosh、@jorrit、@mix3d、@Clecio013、@michielvangendt、@intergalacticspacehighway、@jbraithwaite、@marcelocarmona、@benmerckx、@haykerman、@steven-tey、@jaredpalmer、@pi-guy-in-the-sky、@JuanM04、@apollisa、@D-Pagey、@Kikobeats、@ramosbugs、@dan-weaver、@chr