サポートブラウザ

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

Chrome 111+
Edge 111+
Firefox 111+
Safari 16.4+

Browserslist

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

package.json

{
  "browserslist": ["chrome 111", "edge 111", "firefox 111", "safari 16.4"]
}

ポリフィル

Next.jsは広く使用されているポリフィルを注入します。以下を含みます：

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 Routerの場合

ポリフィルをインクルードするには、instrumentation-client.jsファイルにインポートできます。

instrumentation-client.ts

import './polyfills'

Pages Routerの場合

この場合、カスタム<App>または個別のコンポーネントに、必要な特定のポリフィルのトップレベルインポートを追加してください。

pages/_app.tsx

TypeScript

import './polyfills'
 
import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

条件付きでのポリフィルロード

最適なアプローチは、サポートされていない機能を特定のUIセクションに分離し、必要に応じて条件付きでポリフィルをロードすることです。

hooks/analytics.ts

TypeScript

import { useCallback } from 'react'
 
export const useAnalytics = () => {
  const tracker = useCallback(async (data: unknown) => {
    if (!('structuredClone' in globalThis)) {
      import('polyfills/structured-clone').then((mod) => {
        globalThis.structuredClone = mod.default
      })
    }
 
    /* structuredCloneを使用する処理を実行 */
  }, [])
 
  return tracker
}

JavaScriptの言語機能

Next.jsにより、最新のJavaScript機能をそのまま使用できます。ES6機能に加えて、Next.jsは以下もサポートしています：

Async/await（ES2017）
Object Rest/Spreadプロパティ（ES2018）
Dynamic import()（ES2020）
Optional Chaining（ES2020）
Nullish Coalescing（ES2020）
Class FieldsおよびStatic Properties（ES2022）
その他多数！

TypeScript機能

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

Babelの設定をカスタマイズする（上級）

babel設定をカスタマイズできます。詳細はこちらをご覧ください。