コンテンツへスキップ
ブログに戻る

2021年4月28日（水）

Next.js 10.2

投稿者
コナー・デイビス
コナー・デイビス@connordav_is
JJ カスパー
JJ カスパー@_ijjk
シュー・ディン
シュー・ディン@shuding_
ティム・ヌートケンス
ティム・ヌートケンス@timneutkens
トビアス・コッパーズ
トビアス・コッパーズ@wSokra

Next.js 10.2をご紹介できることを嬉しく思います。主な機能は以下のとおりです。

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

Webpack 5

Next.js 10.1では、高速リフレッシュが改善され、インストール時間が短縮されました。webpack 5によって実現された追加のパフォーマンス向上を共有できることを嬉しく思います。

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

webpack 5が有効になっている場合、以下のような新機能と改善が自動的に適用されます。

  • ディスクキャッシュの改善：ディスクキャッシュにより、コンパイラはnext buildの実行間で作業を保持できます。変更されたファイルのみが再コンパイルされるため、パフォーマンスが向上します。Vercelのお客様であるScaleは、2回目以降のビルドで63%の高速化を観察しました。
  • 高速リフレッシュの改善：Next.jsは、高速リフレッシュ関連のコンパイルを優先するようになり、毎回リフレッシュが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倍高速化）。今後のリリースでの起動パフォーマンスのさらなる改善にご期待ください。

アクセシビリティの向上

ルート変更は、デフォルトでスクリーンリーダーやその他の支援技術にアナウンスされるようになりました。

以下の例は、「Real Data. Real Performance」という見出しが、クライアント側のナビゲーションでmacOS VoiceOverでアナウンスされている様子を示しています。ページ名は、まず<h1>要素を探し、見つからない場合はdocument.title、最後にパス名を使用して検索されます。

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

この機能の実装にご協力いただいたKyle BossとKitty Giraudelに感謝します。

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

Next.js のリライト、リダイレクト、およびヘッダーが、新しいhasプロパティをサポートし、受信ヘッダー、Cookie、クエリ文字列との照合が可能になりました。

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

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

自動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の貢献によって実現しました。