Next.js 10.2

投稿者: Connor Davis @ connordav_is, JJ Kasper @ ijjk, Shu Ding @ shuding, Tim Neutkens @ timneutkens, Tobias Koppers @ wSokra

公開日: 2021年4月28日（水）

Next.js 10.2をご紹介できることを嬉しく思います。以下の機能を搭載しています：

• 高速ビルド: キャッシュにより、後続のビルドが最大約60%高速化
• 高速リフレッシュ: 100ms〜200ms高速なリフレッシュ
• 高速スタートアップ: next devが最大約24%高速化
• アクセシビリティの向上: ルート変更がスクリーンリーダーによってアナウンスされるように
• より柔軟なリダイレクトとリライト: 任意のヘッダー、Cookie、クエリ文字列にマッチ
• 自動Webフォント最適化: フォントCSSのインライン化によるパフォーマンス向上

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

Webpack 5

Next.js 10.1では、Fast Refreshを改善し、インストール時間を短縮しました。webpack 5を通じて実現される追加のパフォーマンス改善をお伝えできることを嬉しく思います。

本日、Next.jsアプリケーションへのwebpack 5の展開を拡大しています。Next.js 10.2以降、next.config.jsでカスタムwebpack設定を使用していないすべてのアプリケーションは、自動的にwebpack 5を使用します。

webpack 5が有効になると、以下のような新機能と改善が自動的に利用できます：

ディスクキャッシュの改善

ディスクキャッシュにより、コンパイラはnext build実行間で作業を永続化できます。変更されたファイルのみが再コンパイルされ、パフォーマンスが向上します。Vercelの顧客Scaleでは、後続のビルドで63%の高速化を観測しました。

Fast Refreshの改善

Next.jsはFast Refresh関連のコンパイルを優先するようになり、毎回100ms〜200ms高速なリフレッシュを実現します。

アセットの長期キャッシュの改善

複数のnext build実行間での出力が決定論的になり、本番環境でのJavaScriptアセットのブラウザキャッシュが改善されます。ページのコンテンツが変更されない場合、ハッシュは同じまま保たれます。

Tree Shakingの改善

CommonJSモジュールがtree shakingされ、未使用のコードが自動的に削除されるようになりました。静的解析を使用して副作用のないモジュールを判定します。export *はより多くの情報を追跡し、デフォルトエクスポートを使用済みとしてフラグ付けしなくなりました。モジュール内tree shakingも有効になり、未使用のエクスポートでのみ使用されるインポートをtree shakingできます。

webpack 4から5へのスムーズな移行を確実にするため、私たちは懸命に取り組みました。3,400を超える統合テストを含むNext.jsコアテストスイートは、webpack 5サポートを有効にしてすべてのプルリクエストで実行されます。

アプリケーションがカスタムwebpack設定を使用している場合は、ドキュメントに従ってwebpack 5を有効にすることをお勧めします。

Next.jsでwebpack 5にアップグレードした後は、ぜひフィードバックをお聞かせください。

スタートアップパフォーマンスの改善

Next.js CLIの初期化を改善し、初回実行後のnext devのブート時間を最大24%高速化しました。例えば、vercel.comのnext devは3.3秒から2.5秒になりました。

私たちはローカル開発体験をリアルタイム（20倍高速）にすることを使命としています。今後のリリースでの追加のスタートアップパフォーマンス改善にご期待ください。

アクセシビリティの改善

ルート変更がデフォルトでスクリーンリーダーやその他の支援技術にアナウンスされるようになりました。以下の例では、クライアントサイドナビゲーションでmacOS VoiceOverによって見出し「Real Data. Real Performance」がアナウンスされています。

ページ名は、まず<h1>要素を探し、次にdocument.title、最後にpathnameにフォールバックして見つけられます。

ルート変更が自動的にアナウンスされるようになりました。

この機能の実装を支援してくれたKyle BossとKitty Giraudelに感謝します。

ヘッダーとクエリ文字列パラメータに基づくルーティング

Next.jsのrewrites、redirects、headersは、受信ヘッダー、Cookie、クエリ文字列に対してマッチングを可能にする新しいhasプロパティをサポートするようになりました。

Vercelの顧客Joynは、hasを使用してコンテンツの発見可能性とパフォーマンスの両方を最適化しています。

例えば、User-Agentに基づいて古いブラウザをリダイレクトできます：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value: 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

別の例として、ユーザーの場所に基づいてリダイレクトすることもできます：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

最後に、ユーザーが既にログインしている場合にリダイレクトすることもできます：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

詳細と追加の例については、redirectsドキュメントをご確認ください。

自動Webフォント最適化

デスクトップ向けWebページの82%がWebフォントを使用しています。カスタムフォントは、サイトのブランディング、デザイン、クロスブラウザ/デバイス間の一貫性にとって重要です。しかし、Webフォントの使用がパフォーマンスを犠牲にすべきではありません。

Next.jsは、Webフォント使用時の自動Webフォント最適化をサポートするようになりました。デフォルトで、Next.jsはビルド時にフォントCSSを自動的にインライン化し、フォント宣言を取得するための追加のラウンドトリップを排除します。これにより、First Contentful Paint（FCP）とLargest Contentful Paint（LCP）が改善されます。

例：

<!-- Before -->
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

<!-- After -->
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
@font-face {
  font-family: 'Inter';
  font-style: normal;
  <!-- ... -->
}
</style>

自動Webフォント最適化は現在Google Fontsをサポートしており、他のフォントプロバイダーへのサポート拡大に取り組んでいます。また、読み込み戦略とfont-display値の制御を追加する予定です。

デフォルトでフォントを最適化することで、開発者が追加の努力なしに高速なWebサイトを提供し、Core Web Vitalsを改善できるよう支援しています。

この機能の実装を支援してくれたGoogleのパートナーとJanicklas Ralphに感謝します。

チームの拡大

webpackの作者であるTobias KoppersがVercelのNext.jsチームに参加したことを発表できることを嬉しく思います。

コミュニティ

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

このリリースは以下の方々の貢献によって実現されました： @rpxs, @lemarier, @RayhanADev, @janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @m-leon, @turadg, @PierreBerger, @divmain, @dominikwilkowski, @pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @sahilrajput03, @marcvangend, @steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @M1ck0, @jbmoelker, @jaisharx, @amannn, @vkarpov15, @gaelhameon, @4ortytwo, @Simply007, @styxlab, @xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @kylemarshall18, @jarrodwatts