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

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 によって可能になったさらなるパフォーマンス改善を発表できることを嬉しく思います。

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

webpack 5 が有効になると、次のような新しい機能と改善が自動的に利用できるようになります。

  • ディスクキャッシュの改善: ディスクキャッシュにより、コンパイラは next build の実行間で作業を永続化できます。変更されたファイルのみが再コンパイルされるため、パフォーマンスが向上します。Vercel の顧客である Scale は、2回目以降のビルドで63%の速度向上を観測しました。
  • Fast Refresh の改善: Next.js は Fast Refresh 関連のコンパイルを優先するようになり、毎回100msから200ms高速にリフレッシュされるようになります。
  • アセットの長期キャッシュの改善: 複数の next build 実行間の出力が決定論的になり、本番環境でのJavaScriptアセットのブラウザキャッシュが改善されます。ページのコンテンツが変更されない場合、ハッシュは同じままになります。
  • Tree Shaking の改善: CommonJS モジュールが tree shaken され、未使用のコードが自動的に削除されるようになりました。副作用のないモジュールを決定するために静的解析が使用されます。export * はより多くの情報を追跡し、デフォルトエクスポートが使用されているとフラグ付けしなくなりました。モジュール内の tree shaking も有効になり、未使用のエクスポートでのみ使用されるインポートが tree shaken されるようになりました。

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。