Next.js 12.1 リリース | Next.js 日本語

Next.js 12.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 を実行してアップデートしてください。

オンデマンド ISR（ベータ版）

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

ISR リリース以降、Tripadvisor、Parachute、HashiCorp などの企業がビルド時間を大幅に短縮しながら驚異的なパフォーマンスを維持しています。しかし、インターバルベースの再検証に関するフィードバックを受け、より柔軟な対応が可能になりました。

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

これは以下の場合にサイトを更新しやすくします：

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

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: '無効なトークンです' });
  }
 
  try {
    await res.unstable_revalidate('/再検証するパス');
    return res.json({ revalidated: true });
  } catch (err) {
    // エラーが発生した場合、Next.js は最後に正常に生成された
    // ページを表示し続けます
    return res.status(500).send('再検証エラー');
  }
}

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

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

デモを確認してオンデマンド再検証を体験し、フィードバックを提供してください。Svix（エンタープライズ向けウェブフック）と Clerk（認証）もデモを作成しています。

SWC サポートの拡張

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

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

上記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 のサンプルから始めてください。

より高速な画像最適化

組み込みの画像最適化 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、サーバーコンポーネント、SSR ストリーミング（アルファ版）

Next.js Conf で示したように、React 18、サーバーサイドサスペンス、ストリーミング SSR、そして最終的にはサーバーコンポーネントを Next.js に導入する作業を進めています。

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

Next.js でサーバーコンポーネントのアルファ版からベータ版への道筋をフォローしている開発者向けに、最近の更新をいくつか紹介します：

Next.js アプリケーション全体をエッジでサーバーレンダリング実行できるように作業中です。Node.js からページを段階的に移行できるよう、どのページを Edge ランタイムにオプトインするか選択できます。

Edge ランタイムについてより詳しく説明する別の記事を近日公開予定です。両方のデモ（next-server-components と next-rsc-demo）は最新の変更を反映しています。

その他のバグ修正と改善

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