サポートされているブラウザ
Next.jsは追加設定なしでモダンなブラウザをサポートしています。
- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+
Browserslist
特定のブラウザや機能を対象にする場合、Next.jsはpackage.json
ファイルでBrowserslistの設定をサポートしています。Next.jsは、デフォルトで次のBrowserslist設定を使用します:
ポリフィル
以下を含む、広く使用されているポリフィルを注入します:
- fetch() — 置き換え:
whatwg-fetch
とunfetch
。 - URL — 置き換え:
url
パッケージ(Node.js API)。 - Object.assign() — 置き換え:
object-assign
、object.assign
、core-js/object/assign
。
依存関係にこれらのポリフィルが含まれている場合、重複を避けるために本番ビルドから自動的に削除されます。
さらに、バンドルサイズを削減するため、Next.jsはそれらを必要とするブラウザにのみこれらのポリフィルを読み込みます。世界的なウェブトラフィックの大部分はこれらのポリフィルをダウンロードしません。
カスタムポリフィル
自分のコードや外部のnpm依存関係が、対象ブラウザ(IE 11など)でサポートされていない機能を必要とする場合、ポリフィルを自分で追加する必要があります。
この場合、カスタム<App>
または個々のコンポーネントで、必要な特定のポリフィルのトップレベルインポートを追加する必要があります。
JavaScriptの言語機能
Next.jsでは、追加設定なしで最新のJavaScript機能を使用できます。ES6の機能に加えて、Next.jsは以下もサポートしています:
- Async/await(ES2017)
- オブジェクトのRest/Spread プロパティ(ES2018)
- 動的
import()
(ES2020) - オプショナルチェーニング(ES2020)
- Nullish Coalescing(ES2020)
- クラスフィールドと静的プロパティ(ES2022)
- その他多数!
TypeScript機能
Next.jsは、組み込みのTypeScriptサポートを提供しています。詳細はこちら。
Babelの設定のカスタマイズ(上級者向け)
Babel設定をカスタマイズできます。詳細はこちら。