【Next.js和訳】Basic Features/Supported Browser and Features

この記事について

この記事は、Basic Features/Supported Browser and Featuresの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Supported Browsers and Features

Next.js は、IE11 をはじめとするすべてのモダンブラウザ（Edge、Firefox、Chrome、Safari、Opera など）に対応しており、設定は不要です。

ポリフィル

IE11 との互換性に必要なポリフィルを透過的に注入します。また、以下のような広く使われているポリフィルも注入しています。

• fetch() — Replacing: whatwg-fetchとunfetch
• URL — Replacing: urlパッケージ(Node.js API)
• Object.assign() — Replacing: object-assignやobject.assign、core-js/object/assign

依存関係にこれらのポリフィルが含まれている場合、重複を避けるためにプロダクションビルドでは自動的に削除されます。

また、バンドルのサイズを小さくするために、Next.js はこれらのポリフィルを必要とするブラウザにのみロードします。世界中のウェブトラフィックの大半は、これらのポリフィルをダウンロードしません。

サーバーサイドのポリフィル

Next.js では、クライアントサイドのfetch()に加えて、Node.js 環境でのfetch()もポリフィルしています。isomorphic-unfetchやnode-fetchなどのポリフィルを使わなくても、サーバーコード（getStaticProps/getServerSidePropsなど）でfetch()を使うことができます。

カスタムポリフィル

自身のコードや外部の npm 依存ファイルが、対象となるブラウザでサポートされていない機能を必要とする場合、自分でポリフィルを追加する必要があります。

この場合、Custom <App>または個々のコンポーネントに、必要なポリフィルのトップレベルインポートを追加する必要があります。

JavaScript 言語の特徴

Next.js では、最新の JavaScript の機能をすぐに使うことができます。ES6 の機能に加えて、Next.js は以下もサポートしています。

• Async/await (ES2017)
• Object Rest/Spread Properties (ES2018)
• Dynamic import() (ES2020)
• Optional Chaining (ES2020)
• Nullish Coalescing (ES2020)
• Class FieldsとStatic Properties (ステージ 3 の提案の一部)
  などがあります。

TypeScript の特徴

Next.js には、TypeScript のサポートが組み込まれています。詳しくはこちらをご覧ください。

Babel コンフィグのカスタマイズ（上級編）

Babel コンフィグをカスタマイズできます。詳しくはこちらをご覧ください。