バージョン 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

SWC が Babel を置き換え

Next.js は現在、Rust ベースのコンパイラであるSWCを使用して JavaScript/TypeScript をコンパイルします。この新しいコンパイラは、個々のファイルをコンパイルする際に 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 を提供してください。

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 が使用された場合にエラーを出すようになりました。

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

next/image のラップ要素が変更されました

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

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

アプリケーションが next/image の <div> タグ（例えば .container div）をターゲットとする特定の CSS を持っている場合、もはや一致しない可能性があります。セレクターを .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://:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Apache (2.x) を使用している場合、サーバーにウェブソケットを有効にするために以下の設定を追加できます。ポート、ホスト名、サーバー名を確認してください。

<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 に設定している場合は、新しい出力の活用方法に関するドキュメントをお読みください。