サポートされているブラウザ

Next.js は、追加設定なしでモダンブラウザをサポートします。

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

Browserslist

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

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

Polyfills

whatwg-fetch および unfetch の代替となる、広く使用されている polyfills を挿入します。

fetch() — 代替: whatwg-fetch および unfetch。
URL — 代替: url パッケージ (Node.js API)。
Object.assign() — 代替: object-assign、object.assign、および core-js/object/assign。

依存関係にこれらの polyfills が含まれている場合、重複を避けるために本番ビルドから自動的に削除されます。

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

カスタム Polyfills

ご自身のコードや外部 npm 依存関係が、対象ブラウザ（IE 11 など）でサポートされていない機能を使用している場合、ご自身で polyfills を追加する必要があります。

App Router 内

Polyfills を含めるには、instrumentation-client.js ファイルにインポートします。

import './polyfills'

Pages Router 内

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

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

Polyfills の条件付き読み込み

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

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
      })
    }
 
    /* Do some work that uses structured clone */
  }, [])
 
  return tracker
}

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 (ES2022)
など、さらに多くの機能が利用可能です！

TypeScript 機能

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

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

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