Menu

バージョン 12

バージョン 12 にアップグレードするには、次のコマンドを実行します：

Terminal
npm i next@12 react@17 react-dom@17 eslint-config-next@12
Terminal
yarn add next@12 react@17 react-dom@17 eslint-config-next@12
Terminal
pnpm up next@12 react@17 react-dom@17 eslint-config-next@12
Terminal
bun add next@12 react@17 react-dom@17 eslint-config-next@12

補足： TypeScriptを使用している場合は、@types/reactと@types/react-domも対応するバージョンにアップグレードしてください。

12.2へのアップグレード

Middleware - 12.2以前にMiddlewareを使用していた場合は、詳細についてアップグレードガイドを参照してください。

12.0へのアップグレード

最小Node.jsバージョン - 最小Node.jsバージョンが12.0.0から12.22.0に引き上げられました。これはネイティブES Modulesをサポートする最初のバージョンです。

最小React バージョン - 必要な最小Reactバージョンは17.0.2です。アップグレードするには、ターミナルで次のコマンドを実行できます：

Terminal
npm install react@latest react-dom@latest
yarn add react@latest react-dom@latest
pnpm update react@latest react-dom@latest
bun add react@latest react-dom@latest

Babelに代わるSWC

Next.jsは、JavaScript/TypeScriptをコンパイルするために、Rust製コンパイラのSWCを使用するようになりました。この新しいコンパイラは、個々のファイルをコンパイルする際にBabelよりも最大17倍、Fast Refreshでは最大5倍高速です。

Next.jsは、カスタムBabel設定を持つアプリケーションとの完全な下位互換性を提供します。Next.jsがデフォルトで処理するすべての変換（styled-jsxやgetStaticProps、getStaticPaths、getServerSidePropsのツリーシェイキングなど）は、Rustに移植されています。

アプリケーションにカスタムBabel設定がある場合、Next.jsは自動的にJavaScript/TypescriptのコンパイルにおいてSWCの使用を無効化し、Next.js 11と同じ方法でBabelにフォールバックします。

現在、外部ライブラリとの統合の多くは、カスタムBabel変換を必要としていますが、近い将来にRustベースのSWC変換に移植される予定です。これらには以下が含まれますが、これらに限定されません：

  • Styled Components
  • Emotion
  • Relay

SWCの採用に役立つ変換の優先順位を決めるために、このフィードバックスレッドで.babelrcをご提供ください。

最小化にTerserに代わるSWC

next.config.jsのフラグを使用して、最大7倍高速なSWCでJavaScriptの最小化に選択的に切り替えることができます：

next.config.js
module.exports = {
  swcMinify: true,
}

SWCによる最小化は、より多くの実際のNext.jsアプリケーションでテストできるよう、オプトインフラグになっています。Next.js 12.1でデフォルトになる前に、最小化に関するフィードバックはこのフィードバックスレッドに記載してください。

styled-jsx CSSパーシングの改善

Rust製コンパイラの上に、styled-jsx Babel変換で使用されているものと同じCSSパーサーを新たに実装しました。この新しいパーサーはCSSの処理を改善し、以前は予期せぬ動作を引き起こしていた無効なCSSでエラーを発生させるようになりました。

この変更により、無効なCSSは開発中とnext build時にエラーを投げるようになります。この変更はstyle-jsxの使用にのみ影響します。

next/imageの囲み要素の変更

next/imageは、<div>の代わりに<span>内に<img>をレンダリングするようになりました。

アプリケーションに.container spanのようなスパンを対象とする特定のCSSがある場合、Next.js 12へのアップグレード時に<Image>コンポーネント内の囲み要素と誤ってマッチする可能性があります。.container span.itemのような特定のクラスへのセレクタを制限し、<span className="item" />のように関連するコンポーネントを更新することで、これを回避できます。

next/imageの<div>タグを対象とする特定のCSSがアプリケーションにある場合（例：.container div）、もはやマッチしない可能性があります。セレクタを.container spanに更新するか、できれば<Image>コンポーネントを囲む新しい<div className="wrapper">を追加し、.container .wrapperのようにターゲットにしてください。

classNameプロパティは変更されず、引き続き基になる<img>要素に渡されます。

詳細はドキュメントを参照してください。

HMR接続がWebSocketを使用するように変更

以前は、Next.jsはHMRイベントを受信するためにサーバー送信イベント接続を使用していました。Next.js 12では、WebSocket接続を使用します。

Next.jsの開発サーバーにリクエストをプロキシする際、アップグレードリクエストが正しく処理されることを確認する必要がある場合があります。例えば、nginxでは次の設定を追加する必要があります：

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Apache（2.x）を使用している場合、サーバーにWebSocketを有効にするために次の設定を追加できます。ポート、ホスト名、サーバー名を確認してください。

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
 # Next.js 12 uses websocket
 <Location /_next/webpack-hmr>
    RewriteEngine On
    RewriteCond %{QUERY_STRING} transport=websocket [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
 </Location>
</VirtualHost>

expressなどのカスタムサーバーの場合、リクエストが正しく渡されるようにするためにapp.allを使用する必要がある場合があります。例：

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res)
})

Webpack 4のサポートが削除されました

すでにwebpack 5を使用している場合は、このセクションをスキップできます。

Next.jsは、Next.js 11でコンパイル用のデフォルトとしてwebpack 5を採用しました。webpack 5アップグレードドキュメントで伝えられているように、Next.js 12はwebpack 4のサポートを削除しました。

オプトアウトフラグを使用してwebpack 4を引き続き使用しているアプリケーションがある場合、webpack 5アップグレードドキュメントにリンクするエラーが表示されます。

targetオプションは非推奨

next.config.jsにtargetがない場合は、このセクションをスキップできます。

targetオプションは、ページの実行に必要な依存関係をトレースするための組み込みサポートに置き換えられました。

next build中に、Next.jsは各ページとその依存関係を自動的にトレースし、アプリケーションの本番バージョンをデプロイするために必要なすべてのファイルを決定します。

現在targetオプションをserverlessに設定している場合は、新しい出力を活用する方法についてのドキュメントをお読みください。