サポートブラウザ
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
, andcore-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の設定をカスタマイズすることができます。 こちらで詳しく学べます。