バージョン12

バージョン12にアップグレードするには、次のコマンドを実行してください:

Terminal

npm install next@12

yarn add next@12

pnpm update next@12

bun add next@12

12.2へのアップグレード

ミドルウェア - 12.2より前にミドルウェアを使用していた場合は、アップグレードガイドを参照してください。

12.0へのアップグレード

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

最低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設定を持つアプリケーションとの完全な後方互換性を提供します。styled-jsxやgetStaticProps/getStaticPaths/getServerSidePropsのツリーシェイキングなど、Next.jsがデフォルトで処理するすべての変換は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でフラグを設定することで、JavaScriptのミニフィケーションにTerserの代わりに最大7倍高速なSWCをオプトインで使用できます:

next.config.js

module.exports = {
  swcMinify: true,
}

SWCを使用したミニフィケーションはオプトインフラグとして提供され、Next.js 12.1でデフォルトになる前に、より多くの実際のNext.jsアプリケーションに対してテストできるようになっています。ミニフィケーションに関するフィードバックがある場合は、このフィードバックスレッドに投稿してください。

styled-jsx CSS解析の改善

Rustベースのコンパイラに加えて、styled-jsx Babel変換で使用されているものに基づいた新しいCSSパーサーを実装しました。この新しいパーサーはCSSの処理が改善され、以前は見過ごされていた不正なCSSが使用されるとエラーが発生するようになりました。

この変更により、不正なCSSは開発中とnext build時にエラーをスローします。この変更はstyled-jsxの使用にのみ影響します。

`next/image`のラッピング要素の変更

next/imageは現在、<img>を<div>の代わりに<span>内にレンダリングします。

アプリケーションに.container spanのような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イベントを受信するためにserver-sent events接続を使用していました。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は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に設定している場合は、新しい出力を活用する方法に関するドキュメントを読んでください。

On this page