Next.js 12.1

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

• オンデマンドISR（ベータ版）： getStaticPropsを使用してページを即座に再検証します。
• SWCのサポートの拡張： styled-components、Relayなど。
• next/jest プラグイン： SWCを使用したゼロ構成Jestサポート。
• SWCを使用した高速ミニファイ（RC）： Terserよりも7倍高速なミニファイ。
• セルフホスティングの改善: Dockerイメージが約80%小さくなりました。
• React 18 & サーバーコンポーネント (アルファ版): 安定性とサポートが向上しました。
• 開発者アンケート: あなたのフィードバックでNext.jsの改善にご協力ください。

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

オンデマンドの増分静的再生成 (ベータ版)

Next.jsは、getStaticPropsを使用する個々のページを再検証できる関数unstable_revalidate()を公開しました。これは、Next.js 9.5で増分静的再生成 (ISR) を導入して以来、最も要望の多かった機能の1つです。

ISRのリリース以来、Tripadvisor、Parachute、HashiCorpなどの企業が、驚異的なパフォーマンスを維持しながら、ビルド時間を大幅に短縮しているのを確認しました。しかし、インターバルベースの再検証に関する皆様からのフィードバックを受け、より柔軟性を提供できることを嬉しく思います。

現在、revalidate時間を60に設定すると、すべての訪問者は1分間、同じ生成バージョンのサイトを閲覧することになります。キャッシュを無効化する唯一の方法は、1分経過後にそのページにアクセスした人がいることでした。特定のページのNext.jsキャッシュをオンデマンドで手動でパージできるようになりました。

これは、以下の場合にサイトの更新を容易にします。

• ヘッドレスCMSのコンテンツが作成または更新された場合
• eコマースのメタデータが変更された場合 (価格、説明、カテゴリ、レビューなど)

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  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) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating');
  }
}

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

増分静的再生成は、Next.jsビルドAPI (next build) をサポートするすべてのプロバイダーで動作します。本日より、Vercelにデプロイされた場合、オンデマンド再検証はエッジにページをプッシュする際に約300ミリ秒でグローバルに伝播します。

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

SWCサポートの改善

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

12.1では、Next.jsコンパイラに以下のサポートを追加しました。

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

上記の6つのトランスフォームが追加されたことで、最も一般的なBabelプラグインを新しいコンパイラを使用してRustに移植しました。他に見てみたいプラグインがあれば、ディスカッションでお知らせください。さらに、SWCを通じて有効化される高性能WebAssemblyプラグインのシステムに取り組んでいます。

ゼロコンフィギュレーションJestプラグイン

Next.jsは、RustベースのNext.jsコンパイラを使用してファイルを変換することにより、Jestを自動的に構成するようになりました(next/jest)。これには以下が含まれます。

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

ドキュメントを参照して詳細を確認するか、Jestの例から開始してください。

SWCによる高速な縮小化

Next.js 12では、Next.jsコンパイラの一部として、SWCを使用した縮小化を導入しました。初期の結果では、Terserよりも7倍高速であることが示されました。SWCによる縮小化は、12.1でリリース候補 (RC) となり、12.2でデフォルトになります。

next.config.jsで縮小化にSWCを使用することをオプトインできます。

module.exports = {
  swcMinify: true,
};

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

画像最適化の高速化

組み込みの画像最適化APIが更新され、ISRページと同じパターンがサポートされるようになりました。画像が古い状態で提供され、バックグラウンドで*再検証*されます (stale-while-revalidateとも呼ばれます)。

これは、画像の最適化における重要なパフォーマンスの向上です。詳細については、画像のキャッシュ動作を参照してください。

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

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

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

module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

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

ドキュメントをご確認ください、またはDockerの例から始めてください。環境に基づいて異なる` .env`ファイルを読み込むためのサポートを備えたマルチ環境Dockerの例も用意しました。

React 18、サーバーコンポーネント、およびSSRストリーミング（アルファ版）

Next.js Confで発表されたように、私たちはReact 18、サーバーサイドサスペンス、ストリーミングSSR、そして最終的にはサーバーコンポーネントをNext.jsに導入するために取り組んできました。

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

Next.jsでサーバーコンポーネントがアルファ版からベータ版に移行するのを見守っている開発者の皆様のために、最近のアップデートをご紹介します。

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

Next.jsアプリケーション全体をEdgeでサーバーレンダリングできるように取り組んでいます。どのページをEdgeランタイムにオプトインするかを選択できるため、準備が整い次第、Node.jsからページを段階的に移行できます。

近日中に、Edgeランタイムについて詳しく説明した別の投稿を公開する予定です。両方のデモ（next-server-componentsとnext-rsc-demo）は、最新の変更で更新されました。

その他のバグ修正と改善

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

Next.js開発者調査

最初の開発者調査で、皆様のご意見をお聞かせいただき、Next.jsの改善にご協力ください。

この調査は、8つの質問からなる簡単な調査と、個々の機能に関するフィードバックを深く掘り下げた詳細な調査の2つのパートで構成されています。お時間があれば両方のセクションにご記入いただければ幸いです。そうでない場合は、最初のセクションの後で回答を送信してください。

ご回答は完全に匿名ですが、ご希望の場合はアプリのURLを当社と共有することもできます。

Next.jsの改善にご協力いただきありがとうございます！

貢献者の方々、ありがとうございます

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

貢献を容易にするために、ビルドのパフォーマンスを向上させるTurborepoを使用するようにNext.jsリポジトリを移行しました。また、テストとエラーリンクの足場を追加して、テストの記述を簡単に開始できるようにしました。最後に、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, @chris-stytch, @MikevPeeren, @janpio, @emw3, @nubpro, @cmdcolin, @joostdecock, @sgallese, @housseindjirdeh, @minervabot, @cjboco, @Ryuurock, @dm430, @mkarkachov, @nvh95, @gfortaine, @zifeo, @vicente-s, @Rohithgilla12, @brookton, @skirsten, @davidfateh, @DavidBabel, @mannybecerra, @pveyes, @kaykdm, @xhiroga, @mzaien, @losfair, @ykzts, @knezevicdev, @yang-feng-yfeng, @xuchaobei, @elkevinwolf, @fabienheureux, @nilskaspersson, @Andarist, @mathcrln, @dferber90, @FranciscoMoretti, @benschwarz, @wendellhu95, @gazdagergo, @imabp, @ljosberinn, @samuliasmala, @ka2jun8, @monsonjeremy, @pqt, @leoortizz, @michel-kraemer, @ntkoopman, @iicdii, @chentsulin, @ericmatthys, @lennym, @balogunkeji, @wnr, @chemicalkosek, @KittyGiraudel, @OKinane, @KonstHardy, @BrandonRomano, @furcan, @dusanralic, @elliottsj, @hi-ogawa, @panva, @genetschneider, @thundermiracle, @stefano-rainieri, @ericbiewener, @vordgi, @stevejarvis, @ihmpavel, @matamatanot, @dyarfaradj, @iheyunfei, @ascorbic, @fytriht, @emzoumpo, @onurtemiz, @a-ursino, @mxschmitt, @bywo, @OArnarsson, @TurekBot, @gish, @vadymshymko, @kamsar, @skhaz, @Prashoon123, @IrisvanOllefen, @evan-bradley, @ntltd, @EzequielDM, @oBusk, @martpie, @BruceRodrigues, @luke-h1, @lucasvazq, @velocity23, @AkiraTsuboi, @mitheelgajare, @JamiesWhiteShirt, @leroydev, @JulienZD, @leotaku, @mattfwood, and @kripod の皆様です。