Next.js 12.1 | Next.js

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 は、unstable_revalidate() という関数を公開し、getStaticProps を使用する個々のページを再検証できるようになりました。これは、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 Build API (next build) をサポートするすべてのプロバイダーで機能します。本日より Vercel にデプロイされた場合、オンデマンド再検証は、ページをエッジにプッシュする際に約 300 ミリ秒でグローバルに伝播します。

デモを見るでオンデマンド再検証を実際に確認し、フィードバックをお寄せください。Svix (エンタープライズ対応 Webhook) と 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 で有効にできます。

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

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

ドキュメントを確認するか、Docker の例から始める。環境に応じて異なる .env ファイルをロードできる、マルチ環境 Docker の例もあります。

React 18、サーバーコンポーネント、SSR ストリーミング (アルファ版)

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

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

Next.js でアルファ版からベータ版へとサーバーコンポーネントのパスを追跡している開発者向けに、最近のアップデートをいくつかご紹介します。

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

Edge Runtime に関する詳細な投稿は近日中に公開します。デモ (next-server-components および next-rsc-demo) は、最新の変更で更新されています。

その他のバグ修正と改善

ESLint で target="blank" を使用した <a> タグの警告がなくなりました。
.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 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、@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 の貢献によってもたらされました。