Next.js 10

2020年10月27日（火曜日）

投稿者：Belén Curcio @ okbel、Connor Davis @ connordav_is、JJ Kasper @ _ijjk、Joe Haddad @ timer150、Luis Alvarez @ luis_fades、Shu Uesugi @ chibicode、Steven @ styfle、Tim Neutkens @ timneutkens

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

• 組み込みImageコンポーネントと自動画像最適化：新しいnext/imageコンポーネントを使用して画像を自動的に最適化
• 国際化ルーティング：組み込みプリミティブでNext.jsアプリケーションの国際化を開始
• Next.js Analytics：実際のユーザーパフォーマンスを測定し、対策を実行
• Next.js Commerce：高性能eコマースサイト用のオールインワンスターターキット
• React 17サポート：最新のReactリリースはNext.jsと完全に互換性があります
• getStaticProps / getServerSideProps Fast Refresh：データ取得メソッドを編集する際のプロパティの自動リロード
• MDX用Fast Refresh：@next/mdxを使用する際、Fast Refreshを活用してフルページリロードなしで変更を適用
• サードパーティReactコンポーネントからのCSSインポート：npmからのコンポーネントに必要なCSSのインポートがサポートされました
• hrefの自動解決：next/linkでasプロパティが不要になりました
• @next/codemod CLI：すべてのNext.jsコードモッドへの簡単なアクセスを可能にします
• getStaticPathsのBlocking Fallback：静的フォールバックページを提供する代わりに、新しい静的ページを生成する際の事前レンダリングを待機

組み込みImageコンポーネントと自動画像最適化

Next.jsでの私たちの目標は、開発者体験とユーザー体験の2つを改善することです。今年、私たちはすでに開発者体験とすべてのNext.jsアプリケーションのパフォーマンス向上の両方に大きく投資してきました。ブラウザが読み込む必要があるJavaScriptの量を削減することに焦点を当てました。パフォーマンスと開発者体験を向上させる20以上の新機能を導入しました。同時に、Next.jsコアのJavaScriptサイズは16%削減されました。

1月には、Google Chromeチームとの協力により、新しい最高クラスのJavaScriptコード分割戦略を導入しました。例えば、Barnebysはアプリケーションサイズが23%減少し、Sumupは最大のJavaScriptバンドルサイズが70%減少しました。これらの改善は、Next.jsアプリケーションのコードを変更することなく達成されました。企業は単にNext.jsを最新バージョンにアップグレードするだけで、この新しい戦略を自動的に採用しました。

Web上の画像

ブラウザが読み込む必要があるJavaScriptの量を削減することに焦点を当てることは成果を上げましたが、Webはただのjavascriptではありません：マークアップと画像もあります。画像はWebページの総バイト数の50%を占めています。画像は、ページが読み込まれる際に最も大きな可視要素であることが多いため、Largest Contentful Paintに大きな影響を与えます。Largest Contentful PaintはCore Web Vitalの一つで、Googleが検索ランキングで間もなく使用する予定です。

すべての画像の半分は1メガバイトを超えるサイズで、これはWeb上での表示に最適化されていないことを意味します。現在、ユーザーは携帯電話、タブレット、ラップトップを使用してWebを閲覧していますが、画像は依然としてワンサイズフィットオールです。例えば：サイトは2000×2000ピクセルの画像を読み込みますが、携帯電話では100×100ピクセルでしか表示されません。

さらに、Webページ上の画像の30%は初期ビューポートの外にあり、これはブラウザがユーザーがページをさらにスクロールするまで見ることのない画像を読み込むことを意味します。

画像には幅と高さのプロパティがないことが多く、ページが読み込まれる際に画像が飛び回る原因となります。これはCumulative Layout Shift Core Web Vitalを悪化させます。

Webサイト上の画像の99.7%は、WebPなどの現代的な画像フォーマットを使用していません。

Webページで画像をパフォーマンス良く使用するためには、多くの側面を考慮する必要があります：サイズ、重量、遅延読み込み、現代的な画像フォーマット。開発者は画像を最適化するために複雑なビルドツールを設定する必要がありますが、これらのツールは通常、外部データソースからのユーザー投稿画像をカバーしないため、すべての画像を最適化することは不可能です。この不可能な開発タスクは必然的にフラストレーションのあるエンドユーザー体験につながります。

Next.js Imageコンポーネント

Web上でのパフォーマンスの良い画像に対する私たちのソリューションを発表できることを嬉しく思います：Next.js ImageコンポーネントとAutomatic Image Optimization。

最も基本的なレベルでは、Next.js ImageコンポーネントはHTML <img> 要素の現代的なWebに進化したドロップイン置換です。

<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture" />

import Image from 'next/image';
<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture" />;

Google Chromeチームは、ベストプラクティスをデフォルトにすることでページパフォーマンスを向上させるために、このReactコンポーネントの作成を支援しました。

next/imageコンポーネントを使用すると、画像は自動的に遅延読み込みされ、ユーザーが画像を見る直前にのみレンダリングされます。これにより、初期ビューポート外の30%の画像の読み込みを防ぎます。

画像の寸法が強制され、ブラウザは読み込み時に画像が飛び込むのではなく、画像に必要なスペースを即座にレンダリングできるようになり、レイアウトシフトを防ぎます。HTML <img> 要素の幅と高さはレスポンシブレイアウトで問題を引き起こす可能性がありますが、next/imageを使用する場合はそうではありません。next/imageを使用すると、提供された幅と高さからのアスペクト比に基づいて画像が自動的にレスポンシブになります。

開発者は初期ビューポートにある画像をマークでき、Next.jsがこれらの画像を自動的にプリロードできるようになります。初期ビューポートでの画像のプリロードは、Largest Contentful Paintを最大50%改善することが示されています。

自動画像最適化

HTML <img> 要素と比較してこれらの改善があっても、まだ大きな問題があります。2000×2000ピクセルの画像が、より小さな画像をレンダリングする携帯電話に送信されています。Next.js 10では、この問題も解決しています。

next/imageコンポーネントは、組み込み画像最適化を通じて自動的により小さなサイズを生成します。

組み込み画像最適化は、ブラウザがサポートしている場合、JPEGより約30%小さいWebPなどの現代的な画像フォーマットで画像を自動的に提供します。また、Next.jsが将来の画像フォーマットを自動的に採用し、それらのフォーマットをサポートするブラウザに提供することも可能にします。

画像最適化はあらゆる画像ソースで動作します。CMSなどの外部データソースからの画像であっても最適化されます。ビルド時に画像を最適化する代わりに、Next.js 10はユーザーがリクエストする際にオンデマンドで画像を最適化します。静的サイトジェネレーターや静的のみのソリューションとは異なり、10枚の画像を配信するか1000万枚の画像を配信するかに関係なく、ビルド時間は増加しません。

結論

新しいnext/imageコンポーネントと自動画像最適化は、ユーザー体験を大幅に改善する強力な新しいプリミティブです。next/imageコンポーネントは、自動遅延読み込み、重要な画像のプリロード、デバイス間での正しいサイジング、現代的なフォーマットの自動サポートを処理します。これらの機能はあらゆるソースからの画像で動作します。

これらの新しいプリミティブでユーザー体験がどれほど高速になるかを楽しみにしています。詳細については、Next.js ImageコンポーネントとAutomatic Image Optimizationのドキュメントをご確認ください。

国際化ルーティング

今年、いくつかの企業とコミュニティメンバーが、国際化がいかに重要かを私たちのチームに理解させてくれました。例えば、消費者の72%が翻訳されたサイトに留まる可能性が高く、消費者の55%が母国語のeコマースサイトからのみ購入すると回答していることを学びました。異なる国での市場参入を計画している場合、プロジェクトの国際化は成功にとって重要です。

プロジェクトの国際化には2つの主要な柱があります：翻訳とルーティング。多くのReactライブラリはアプリケーションを翻訳する準備をしますが、ほとんどはルーティングを手動で処理することを期待し、一般的に1つのレンダリング戦略でのみ動作します。

そのため、Next.js 10の一部として、国際化ルーティングと言語検出の組み込みサポートをリリースしています。この国際化ルーティングの組み込みサポートは、Next.jsのハイブリッド戦略をサポートしているため、ページごとにStatic GenerationまたはServer-Renderingを選択できます。

Next.js 10は最も一般的な2つのルーティング戦略をサポートしています：サブパスルーティングとドメインルーティング。

両方の戦略で、Next.js設定でロケールを設定することから始めます。

next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'nl'],
    defaultLocale: 'en',
  },
};

ロケールはUTS Locale Identifiersで、ロケールを定義するための標準化されたフォーマットです。一般的にLocale Identifierは、ダッシュで区切られた言語、地域、スクリプトで構成されます：language-region-script。地域とスクリプトはオプションです。

例：

• en-US - アメリカで話される英語
• nl-NL - オランダで話されるオランダ語
• nl - オランダ語、特定の地域なし

ロケールが設定されたら、サブパスまたはドメインルーティングを選択できます。

サブパスルーティング

サブパスルーティングはURLにロケールを配置します。これにより、すべての言語が単一のドメインに存在できます。例えば、/nl-nl/blog と /en/blog のようにURLにロケールを挿入できます。

ドメインルーティング

ドメインルーティングは、ロケールをトップレベルドメインにマッピングできます。例えば、example.nlを nl ロケールにマッピングし、example.comを en ロケールにマッピングできます。

ドメインルーティングには、ドメインのルーティング方法を知るための追加設定が必要です：

next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'nl'],
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl',
      },
    ],
  },
};

言語検出

Next.js 10には、すべての現代的なブラウザがサポートするAccept-Languageヘッダーに基づく / ルートでの組み込み言語検出があります。設定されたロケールがAccept-Languageヘッダーと照合され、設定された戦略に従ってリダイレクトされます。

検索エンジン最適化

Next.jsはユーザーが訪問したページの言語を知っているため、<html> タグにlang属性を自動的に追加します。Next.jsはページのバリアントについて知らないため、next/headを使用してhreflangメタタグを追加するのはあなた次第です。hreflangについて詳しくは、Google Webmastersドキュメントで学ぶことができます。

Next.jsでの国際化の未来

国際化ルーティングは、プロジェクトの国際化とローカライゼーションを簡単にする一連の機能の最初のものです。国際化ルーティングは、大多数のReact国際化ライブラリとの統合を可能にします。

国際化ルーティングについて詳しく学ぶには、国際化ルーティングドキュメントをご確認ください。

Next.js Speed Insights

Vercelでは、測定できないものは修正できないことを知っています。あなたの訪問者はサイトのパフォーマンスにますます敏感になっています。50%以上の訪問者が、読み込みに3秒以上かかる場合はあなたのWebサイトを放棄します。eコマースの場合、多くの人が読み込み時間を1/10秒改善することで、コンバージョンが1%増加することを発見しています。

パフォーマンスがあなたの成功にとっていかに重要かのため、Next.js Speed Insightsをリリースできることを誇りに思います。実世界のパフォーマンスメトリクスを追跡し、それらの洞察を開発ワークフローにフィードバックするソリューションです。

Next.js Speed Insightsでは：

• 一度測定する代わりに、継続的に測定します
• 開発デバイスで測定する代わりに、訪問者が実際に使用しているデバイスから測定値を取得します

Next.js Speed Insightsは全体像に焦点を当て、オーディエンスを深く理解し、アプリケーションがユーザーにとってどのようにパフォーマンスするかを理解することです。

私たちが実際のデータ収集にこだわる理由は、パフォーマンス低下の原因が常に最も明白ではないからです。パフォーマンスの回帰は様々な場所から生じる可能性があります—サードパーティスクリプトやスタイル