バージョン 12

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

ターミナル

npm i next@12 react@17 react-dom@17 eslint-config-next@12

ターミナル

yarn add next@12 react@17 react-dom@17 eslint-config-next@12

ターミナル

pnpm up next@12 react@17 react-dom@17 eslint-config-next@12

ターミナル

bun add next@12 react@17 react-dom@17 eslint-config-next@12

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

12.2 へのアップグレード

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

12.0 へのアップグレード

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

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

ターミナル

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

SWC による Babel の置き換え

Next.js は、Rust ベースのコンパイラ SWC を使用して JavaScript/TypeScript をコンパイルするようになりました。この新しいコンパイラは、個々のファイルをコンパイルする場合、Babel より最大 17 倍高速で、高速リフレッシュは最大 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 を提供してください。

SWC による Terser の置き換え（ミニファイ）

next.config.js内のフラグを使用することで、JavaScriptの圧縮処理をTerserからSWCに切り替えて、最大7倍高速化できます。

next.config.js

module.exports = {
  swcMinify: true,
}

SWCによる圧縮はオプトイン方式です。これは、Next.js 12.1でデフォルトになる前に、より現実的なNext.jsアプリケーションでテストできることを保証するためです。圧縮に関するフィードバックがありましたら、こちらのフィードバックスレッドにご投稿ください。

styled-jsx CSSパースの改善

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

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

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

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

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

アプリケーションで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 https://127.0.0.1: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 / https://127.0.0.1:3000/
 ProxyPassReverse / https://127.0.0.1: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://127.0.0.1:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://127.0.0.1:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://127.0.0.1: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 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に設定している場合は、新しい出力の活用方法についてドキュメントをお読みください。