サポートブラウザ

Next.jsはモダンブラウザをゼロコンフィグでサポートします。

• Chrome 64+
• Edge 79+
• Firefox 67+
• Opera 51+
• Safari 12+

Browserslist

特定のブラウザや機能をターゲットにしたい場合、Next.jsはpackage.jsonファイル内でBrowserslistの設定をサポートしています。Next.jsはデフォルトで以下のBrowserslist設定を使用します:

package.json

{
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 12"
  ]
}

Polyfills

多用されているポリフィルを注入します。以下を含みます:

• fetch() — 置き換え: whatwg-fetch と unfetch
• URL — 置き換え: url パッケージ (Node.js API)
• Object.assign() — 置き換え: object-assign, object.assign, and core-js/object/assign

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

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

カスタムPolyfills

自分のコードや外部のnpm依存関係がターゲットブラウザでサポートされていない機能を必要とする場合（例えばIE11など）、自分でポリフィルを追加する必要があります。

この場合、必要な特定のポリフィルを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 and Static Properties (ES2022)
• その他多く！

TypeScriptの機能

Next.jsにはTypeScriptのサポートが組み込まれています。 こちらで詳しく学べます。

Babel設定のカスタマイズ (Advanced)

Babelの設定をカスタマイズすることができます。 こちらで詳しく学べます。