バージョン 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 Modules サポートを備えた最初の 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

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 を SWC に置き換えることができます。これは最大 7 倍高速です。

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 のような特定のクラスに制限し、関連するコンポーネントをその className で更新します（例：<span className="item" />）。

アプリケーションで、たとえば .container div のような next/image <div> タグを対象とする特定の CSS がある場合、一致しなくなる可能性があります。セレクターを .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 https://:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Apache (2.x) を使用している場合は、次の構成を追加してサーバーへの Web ソケットを有効にできます。ポート、ホスト名、サーバー名をレビューしてください。

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / https://:3000/
 ProxyPassReverse / https://: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://:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://: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 に設定している場合は、新しい output を活用する方法に関するドキュメントをお読みください。