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

2021年4月28日 水曜日

Next.js 10.2

投稿者：
Connor Davis
Connor Davis@connordav_is
JJ Kasper
JJ Kasper@_ijjk
Shu Ding
Shu Ding@shuding_
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

Next.js 10.2をリリースしました。

`npm i next@latest` を実行して今すぐ更新してください。

Webpack 5

Next.js 10.1では、Fast Refreshを改善し、インストール時間を短縮しました。webpack 5によって実現されたさらなるパフォーマンス向上をお知らせできることを嬉しく思います。

本日、webpack 5のNext.jsアプリケーションへのロールアウトを拡大します。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アセットのブラウザキャッシュが向上します。ページのコンテンツが変更されない場合、ハッシュは同じままに保たれます。
  • ツリーシェイキングの改善：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,
      },
    ];
  },
};

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

ウェブフォントの自動最適化

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

Next.jsは、ウェブフォントを使用する際に自動ウェブフォント最適化をサポートするようになりました。デフォルトでは、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>

自動ウェブフォント最適化は現在Google Fontsをサポートしており、他のフォントプロバイダーへのサポートをさらに拡大するよう取り組んでいます。また、読み込み戦略と`font-display`値の制御を追加する予定です。フォントをデフォルトで最適化することで、開発者がより高速なウェブサイトをリリースし、追加の労力なしに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の貢献によって実現されました。