バージョン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を使用しています。カスタム設定がある場合は、Next.js webpack 5ドキュメントを参照してアップグレードしてください。

distDirのクリーンがデフォルトに

ビルド出力ディレクトリ（デフォルトは.next）は、Next.jsキャッシュを除いてデフォルトでクリアされるようになりました。詳細はcleaning distDir RFCを参照してください。

この動作に依存していた場合は、next.config.jsにcleanDistDir: falseフラグを追加して無効化できます。

next devとnext startでPORTがサポート

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で非推奨となり、無効化されていました。Next.js 11で完全に削除されました。

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

pages/_app.jsからContainerを削除

このエクスポートはNext.js 9で非推奨となり、開発時に警告が表示されていました。Next.js 11で削除されました。

pages/_app.jsでnext/appから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でこれらのオプションは削除されました。

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

使用している場合はドキュメントを参照してください。

Head.rewindを削除

Head.rewindはNext.js 9.5以降無効化されていました。Next.js 11で削除されました。安全に削除できます。

Moment.jsロケールがデフォルトで除外

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

特定のロケールを読み込むには以下のコードを使用します:

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

この新しいデフォルト動作を無効にするには、next.config.jsにexcludeDefaultMomentLocales: falseを追加します。ただし、この最適化を無効にすることは推奨されません。

router.eventsの使用法を更新

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

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`
    )
  }

  router.events.on('routeChangeStart', handleRouteChange)

  // コンポーネントがアンマウントされる場合、
  // イベントから購読を解除:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

非公開の内部プロパティであるrouter.router.eventsを使用している場合は、router.eventsを使用するようにしてください。

React 16から17への移行

React 17では新しいJSX Transformが導入され、Next.jsの長年の機能（JSX使用時にimport React from 'react'が不要）がReactエコシステム全体に広がりました。React 17を使用すると、Next.jsは自動的に新しい変換を使用します。この変換はReact変数をグローバルにしません（これは以前のNext.js実装の意図しない副作用でした）。Reactをインポートせずに使用している場合、自動修正用のcodemodが利用可能です。

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

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

npm install react@latest react-dom@latest

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

yarn add react@latest react-dom@latest