Next.js 9.1.7

Next.js 9 は6ヶ月前に、Next.js 9.1 は3ヶ月前にリリースされました。

これら2つのリリースでは、ベースラインのクライアントランタイムサイズを増やすことなく、Next.js に非常に強力な新機能が追加されました。

それ以来、フレームワーク全体の洗練と改善に注力してきました: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6, そして 9.1.7。

これらのリリースで改善された点を見ていきましょう！

• 3% - 8%以上のクライアントサイド JavaScript サイズ削減: アプリケーション出力をさらに最適化し、hello world アプリケーションから7.5kBを削減しました。より複雑なアプリケーションでは8%以上の削減が期待できます。
• 再設計されたプロダクションビルド CLI 出力: プロダクションビルド出力では、gzip圧縮されたファイルサイズがより理解しやすい形式で表示されるようになりました。
• 新たな組み込みポリフィル: fetch(), URL, Object.assign: アプリケーションはレガシーブラウザでも互換性を気にせず fetch() API、URL、Object.assign を利用できます。
• ページ読み込みの最適化: FCP と TTI の改善: Google Chrome チームと緊密に協力し、ページ読み込みパフォーマンスを最大化しました。これによりエンドユーザー体験が大幅に向上します。
• 最新 JavaScript 機能のサポート: Optional Chaining、Nullish Coalescing など安定した ES2020 機能を含む最新 JavaScript 機能を常に利用できるよう取り組んでいます。
• next export アプリケーション向けゼロコンフィグデプロイサポート: next export を使用したアプリケーションを Vercel に設定なしでデプロイできるようになりました。
• React Strict Mode 準拠とオプトイン: Next.js のクライアントサイドランタイム全体が React の Strict Mode と互換性を持つようになりました。またアプリケーション全体でこのモードを有効にする設定オプションも追加しました。
• Nightly React ビルドに対する自動テスト: Next.js は React の next チャネル に対して12時間ごとに自動テストされるようになり、将来のリリースとの互換性が確保されます。

これらの利点はすべて非破壊的で完全な後方互換性があります。更新するには次のコマンドを実行するだけです:

npm i next@latest react@latest react-dom@latest

3% - 8%以上のクライアントサイド JavaScript サイズ削減

Google Chrome チームとの協力により、すべての Next.js アプリケーションで 7.5kB以上 のサイズ削減が実現されます。

基本的なアプリケーションでは3-4%のアプリケーションサイズ削減が期待でき、より高度なアプリケーションでは6-8%以上（またはそれ以上）の削減が見込めます！

この削減は、url パッケージのクライアントサイドバージョン を URL API 上に構築されたものに置き換えたことにも一部起因しています。

さらに、よく使用されるパッケージ向けの組み込み小型ポリフィルを提供することでサイズ削減を実現しました。これらのポリフィルについて詳しくはこちらをご覧ください。

最後に、JSX 出力を最適化したため、アプリケーション内の JSX 量に比例してサイズ削減が得られます。

再設計されたプロダクションビルド CLI 出力

CLI のプロダクションビルド出力は明確さのために再設計されました。Next.js はハイブリッドアプリケーションフレームワークであるため、各ページは異なる特性を持つ可能性があります。

新しい出力では各ページを次のいずれかに分類します:

• サーバーサイドレンダリング (Server): ページは実行時にサーバーサイドレンダリングされ、getInitialProps または getServerProps (提案) を使用することを意味します
• 自動静的最適化 (Static): ページはビルド時に静的 HTML としてレンダリングされ、静的ファイルとして提供されます（初期 props を使用しません）
• 計算データを使用した静的生成 (SSG): ページはビルド時に静的 HTML/JSON として生成され、静的ファイルとして提供されます（getStaticProps (提案) を使用します）

さらに、新しい出力では各ページの Gzip 圧縮サイズが表示されます — これらのサイズはすべてのページで共有されるファイル（別途表示）を除いています。

各ページのサイズはユーザー体験に応じて色分けされます:

• 130kB未満: 緑 — ほとんどのネットワークとデバイス条件でパフォーマンスが期待できます。
• 130kBから170kBの間: 黄 — グローバルベースラインデバイス + ネットワーク条件 で5-6秒の読み込み時間に近づいています。
• 170kB以上: 赤 — 同じ条件 で6秒以上の読み込み時間がかかる可能性が高いです。

新しい Next.js プロダクション CLI 出力

新しいビルド出力についてのフィードバックをお待ちしています。

近い将来、Next.js にはページが特定のサイズ範囲内にあることを確認するのに役立つサイズバジェットも導入される予定です。

新たな組み込みポリフィル: fetch(), URL, Object.assign

多くのユーザーのアプリケーションとサンプルを調査した結果、ほとんどが同様のポリフィルセットを出荷していることがわかりました。場合によっては、同じ機能に対して重複したポリフィルを持つアプリケーションもありました。

これを改善するため、Google Chrome チームと協力して、最も一般的な3つの API 向けのポリフィルを組み込みました。

差分読み込みを使用することで、これらのポリフィルはグローバルなウェブトラフィックの 83% では読み込まれません。つまり、ほとんどのユーザーはこれらのポリフィルに関連するバイトをダウンロードせず、必要な場合にのみダウンロードされます。

さらに、組み込まれた既知のポリフィルはプロダクションビルドから完全に排除されます。つまり、これらの API のポリフィルを誤ってインポートする依存関係があっても、その代償を支払う必要がなくなります。

組み込まれた API とそれらが不要にするポリフィルのリストは次のとおりです:

• fetch() — 置換対象: whatwg-fetch と unfetch。
• URL — 置換対象: url パッケージ (Node.js API)。
• Object.assign() — 置換対象: object-assign、object.assign、core-js/object/assign。

サーバー上で fetch() を使用する場合は、引き続き isomorphic-fetch または isomorphic-unfetch をインポートする必要があります。

この変更は完全に非破壊的であり、すべてのポリフィルは利用可能な最も仕様に準拠したバージョンで作成されています。結果として、モダンブラウザではプロダクションバンドルから最大 18kB の JavaScript が削除 されます。

ページ読み込みの最適化: FCP と TTI の改善

Next.js はプリロード実装を最適化し、FCP と全体的な TTI を削減しました。

ブラウザのバグを回避することで、CSS（使用時）が JavaScript よりも正しく優先されるようになりました。これにより First Contentful Paint が高速化され、エンドユーザーにとって視覚的に完成したウェブサイトが大幅に高速化されます。

さらに、ページプリフェッチを低優先度のネットワークリクエストを使用するように最適化しました。

また、これらのリクエストはブラウザのアイドル時間中にのみ発生するため、インタラクティブになるまでの時間が短縮されます。これはブラウザが楽観的なプリフェッチよりもアプリケーションをインタラクティブにすることを優先するためです。

最適化前後の FCP/TTI

最新 JavaScript 機能のサポート

Next.js には高度で高度に最適化されたコンパイルパイプラインがあり、最新の JavaScript 機能を使用できます。最近導入した最適化は直接 3-8%の削減 に貢献しました。

これらの JavaScript 機能は、ブラウザの互換性を気にせずに活用できます。私たちは自動的にコードをコンパイルしてすべてのブラウザ（サポート終了バージョンを除く）をサポートします。これには async/await (ES2017)、Object Rest/Spread Properties (ES2018)、Dynamic import() (ES2020) などの ES6+ 機能が含まれます！

このリリースでは、Optional Chaining (Stage 4) と Nullish Coalescing (Stage 4) のサポートを発表できることを嬉しく思います。

function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ deeply.nested.value が利用できない場合はレンダリングされません */
  );
}
 
export default Page;

Optional chaining 演算子 (?.)

function Page(props) {
  return (
    <p>{props.something ?? 'デフォルト値'}</p>
    /* ⬆ "デフォルト値" になります */
  );
}
 
export default Page;

Nullish coalescing 演算子 (??)

将来的には、自動 module / nomodule ビルド を通じてさらに最適化されたバンドルを出力する予定です。

next export アプリケーション向けゼロコンフィグデプロイサポート

Next.js の next export コマンドは、Vercel の ゼロコンフィギュレーション でそのまま動作するようになりました。この変更以前は、next export を利用するユーザーはカスタムの now.json を作成する必要がありました。

Vercel で Next.js のエクスポートモードを利用するには、package.json に次の build スクリプトを記述するだけです:

{
  "scripts": {
    "build": "next build && next export"
  }
}

その後、Next.js アプリケーションを Vercel に たった1つのコマンドで デプロイできます。Vercel をまだインストールしていない場合は、Vercel CLI をインストールしてください。

now

React Strict Mode 準拠とオプトイン

Next.js ランタイム全体が Strict Mode に準拠するようになりました。これには Next.js の head マネージャー (<Head>)、next/dynamic、その他のコア機能の更新が含まれます。つまり、ランタイムはフックを利用するか、非推奨のライフサイクルを排除し、React の新しい Context API を使用しています。

また、アプリケーション全体で Strict Mode を有効にする便利なオプトインオプションも追加しました。

有効にするには、next.config.js で次のオプションを設定します:

module.exports = {
  reactStrictMode: true,
};

あなたやチームがアプリケーション全体で Strict Mode を使用する準備ができていない場合でも問題ありません！<React.StrictMode> を使用して、ページごとに段階的に移行できます。

必須ではありませんが、Strict Mode は将来的に多くの最適化を可能にします。そのため、早めに検討することをお勧めします！

Nightly React ビルドに対する自動テスト

React コアチームとの緊密な連携 により、Next.js は12時間ごとに React の next チャネルに対してテスト されるようになりました。

これらのテストは、React の将来のリリースに対して準備が整い互換性があることを確認するのに役立ちます。互換性は Next.js が非常に重視しているもので、Next.js の長期的な API 安定性に取り組んでいます。

このプロセスは React コアチームによって文書化され、React エコシステムの他のプロジェクトも同様の取り組みを行うことを期待しています。

コミュニティ

今後の変更により、すべての Next.js アプリケーションのサイズとパフォーマンスが改善されることを楽しみにしています。

さらに、Next.js コミュニティはまだ拡大しています:

• 865人以上 の独立したコントリビューターが参加しています。
• GitHub では、プロジェクトが 43,700回以上 スターされています。
• examples ディレクトリ には 220以上の例 があります。

Next.js コミュニティには現在 13,600人以上 のメンバーがいます。ぜひ参加してください！

このリリースを形作るのに役立ったコミュニティとすべての外部フィードバックと貢献に感謝します。