バージョン 11

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

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

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

Webpack 5

Webpack 5がすべてのNext.jsアプリケーションのデフォルトになりました。カスタムのwebpack設定がない場合、アプリケーションはすでにWebpack 5を使用しています。カスタムのwebpack設定がある場合は、アップグレードのガイダンスについてNext.js Webpack 5ドキュメントを参照してください。

`distDir`のクリーンアップがデフォルトになりました

ビルド出力ディレクトリ（デフォルトは`.next`）は、Next.jsのキャッシュを除き、デフォルトでクリアされるようになりました。`distDir`のクリーンアップに関するRFCで詳細を参照できます。

以前にこの挙動に依存していたアプリケーションでは、`next.config.js`に`cleanDistDir: false`フラグを追加することで、新しいデフォルトの挙動を無効にできます。

`PORT`が`next dev`および`next start`でサポートされるようになりました

Next.js 11は、アプリケーションが実行されるポートを設定するための`PORT`環境変数をサポートします。`-p`/`--port`の使用が依然として推奨されますが、何らかの理由で`-p`の使用が禁止されていた場合は、`PORT`を代替として使用できるようになりました。

例

PORT=4000 next start

画像をインポートするための`next.config.js`のカスタマイズ

Next.js 11は、`next/image`による静的画像のインポートをサポートします。この新機能は、画像インポートを処理できることに依存しています。以前に`next-images`または`next-optimized-images`パッケージを追加していた場合、`next/image`を使用した新しい組み込みサポートに移行するか、この機能を無効にすることができます。

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

pages/_app.jsからsuper.componentDidCatch()を削除

`next/app`コンポーネントの`componentDidCatch`は、Next.js 9で非推奨となり、不要になったため、以降はno-opでした。Next.js 11では、削除されました。

もしあなたの`pages/_app.js`にカスタムの`componentDidCatch`メソッドがある場合、`super.componentDidCatch`は不要になったため削除できます。

pages/_app.jsからContainerを削除

このエクスポートはNext.js 9で非推奨となり、不要になったため、以降は開発中に警告とともにno-opでした。Next.js 11では削除されました。

もしあなたの`pages/_app.js`が`next/app`から`Container`をインポートしている場合、`Container`は削除されたため、削除できます。ドキュメントで詳細を確認してください。

ページコンポーネントからprops.urlの使用を削除

このプロパティはNext.js 4で非推奨となり、以降開発中に警告が表示されていました。`getStaticProps` / `getServerSideProps`の導入により、これらのメソッドはすでに`props.url`の使用を許可していませんでした。Next.js 11では、完全に削除されました。

ドキュメントで詳細を確認できます。

next/imageのunsizedプロパティを削除

`next/image`の`unsized`プロパティはNext.js 10.0.1で非推奨となりました。代わりに`layout="fill"`を使用できます。Next.js 11では`unsized`が削除されました。

next/dynamicのmodulesプロパティを削除

`next/dynamic`の`modules`および`render`オプションはNext.js 9.5で非推奨となりました。これは、`next/dynamic` APIを`React.lazy`に近づけるために行われました。Next.js 11では、`modules`および`render`オプションが削除されました。

このオプションはNext.js 8以降ドキュメントに記載されていないため、アプリケーションがこれを使用している可能性は低いです。

アプリケーションが`modules`と`render`を使用している場合、ドキュメントを参照してください。

Head.rewindを削除

`Head.rewind`はNext.js 9.5以降no-opであり、Next.js 11で削除されました。`Head.rewind`の使用は安全に削除できます。

Moment.jsのロケールがデフォルトで除外されるようになりました

Moment.jsにはデフォルトで多くのロケールの翻訳が含まれています。Next.jsは、Moment.jsを使用するアプリケーションのバンドルサイズを最適化するために、これらのロケールをデフォルトで自動的に除外するようになりました。

特定のロケールをロードするには、このスニペットを使用してください

import moment from 'moment'
import 'moment/locale/ja'
 
moment.locale('ja')

この新しい挙動を望まない場合、`next.config.js`に`excludeDefaultMomentLocales: false`を追加することで、この新しいデフォルト設定を無効にできますが、Moment.jsのサイズを大幅に削減するため、この新しい最適化を無効にしないことを強くお勧めします。

router.eventsの使用を更新

レンダリング中に`router.events`にアクセスしている場合、Next.js 11ではプリレンダリング中に`router.events`が提供されなくなりました。`useEffect`内で`router.events`にアクセスするようにしてください。

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`
    )
  }
 
  router.events.on('routeChangeStart', handleRouteChange)
 
  // If the component is unmounted, unsubscribe
  // from the event with the `off` method:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

アプリケーションが非公開の内部プロパティであった`router.router.events`を使用している場合も、`router.events`を使用するようにしてください。

React 16から17へ

React 17では、新しいJSX Transformが導入され、JSXを使用する際に`import React from 'react'`を記述する必要がないというNext.jsの長年の機能が、より広いReactエコシステムにもたらされました。React 17を使用すると、Next.jsは自動的に新しいトランスフォームを使用します。このトランスフォームは`React`変数をグローバルにしません。これは以前のNext.jsの実装の意図しない副作用でした。コードモッドが利用可能で、`React`をインポートせずに誤って使用したケースを自動的に修正します。

ほとんどのアプリケーションはすでに最新バージョンのReactを使用しており、Next.js 11ではReactの最小バージョンが17.0.2に更新されました。

アップグレードするには、以下のコマンドを実行します

npm install react@latest react-dom@latest

または`yarn`を使用する場合

yarn add react@latest react-dom@latest