Next.js 10.2

Next.js 10.2のリリースをお知らせします。主な新機能は以下の通りです：

• ビルドの高速化: キャッシュにより、後続のビルドが最大約60%高速化
• リフレッシュの高速化: 100ms～200msの高速リフレッシュ
• 起動の高速化: next dev が最大約24%高速化
• アクセシビリティ改善: スクリーンリーダーによるルート変更の通知
• 柔軟なリダイレクトとリライト: ヘッダー、クッキー、クエリ文字列に基づくマッチング
• 自動Webフォント最適化: フォントCSSのインライン化によるパフォーマンス向上

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

Webpack 5

Next.js 10.1では、Fast Refreshの改善とインストール時間の短縮を実現しました。今回、webpack 5によって可能になった追加のパフォーマンス改善をお届けします。

Next.js 10.2から、next.config.jsでカスタムwebpack設定を使用していないすべてのアプリケーションで、自動的にwebpack 5が使用されるようになります。

webpack 5を有効にすると、以下のような新機能と改善が自動的に適用されます：

• ディスクキャッシュの改善: ディスクキャッシュにより、next build実行間でコンパイラの作業が保持されます。変更されたファイルのみが再コンパイルされるため、パフォーマンスが向上します。Vercelの顧客であるScaleでは、後続ビルドで63%の高速化を確認しています。
• Fast Refreshの改善: Fast Refresh関連のコンパイルが優先され、毎回100ms～200ms高速にリフレッシュされます。
• アセットの長期キャッシュ改善: 複数のnext build実行間での出力が決定論的になり、本番環境でのJavaScriptアセットのブラウザキャッシュが改善されます。ページの内容が変更されていない場合、ハッシュ値は同じまま保持されます。
• ツリーシェイキングの改善: CommonJSモジュールがツリーシェイキング可能になり、未使用コードが自動的に削除されます。副作用のないモジュールを静的に解析します。export *はより多くの情報を追跡し、デフォルトエクスポートを使用済みとマークしなくなりました。モジュール内ツリーシェイキングも有効化され、未使用エクスポートでのみ使用されるインポートもツリーシェイキング対象になります。

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、最後にパス名にフォールバックして決定されます。

ルート変更が自動的に通知されるようになりました。

この機能の実装に協力してくださったKyle BossとKitty Giraudelに感謝します。

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

Next.jsのrewrites、redirects、headersで、受信ヘッダー、クッキー、クエリ文字列にマッチする新しいhasプロパティがサポートされました。

Vercelの顧客であるJoynは、hasを使用してコンテンツの可視性とパフォーマンスを最適化しています。例えば、User-Agentに基づいて古いブラウザをリダイレクトできます：

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,
      },
    ];
  },
};

別の例として、ユーザーの位置に基づいたリダイレクト：

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

最後に、ログイン済みユーザーのリダイレクト例：

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

詳細と追加例については、リダイレクトドキュメントをご覧ください。

自動Webフォント最適化

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

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

// 最適化前
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// 最適化後
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

自動Webフォント最適化は現在Google Fontsをサポートしており、他のフォントプロバイダーへのサポート拡大を進めています。ロード戦略とfont-display値の制御追加も予定しています。デフォルトでフォントを最適化することで、開発者は追加作業なしでより高速なウェブサイトを提供し、Core Web Vitalsを改善できます。

この機能の実装に協力してくださったGoogleのパートナーとJanicklas Ralphに感謝します。

チームの成長

webpackの作者であるTobias Koppersが、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。