バージョン11

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

Terminal

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

Terminal

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

Terminal

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

Terminal

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機能に移行するか、以下のように無効化できます:

next.config.js

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で非推奨となり、Next.js 11で完全に削除されました。getStaticProps/getServerSidePropsの導入により、これらのメソッドではすでにprops.urlの使用が禁止されていました。詳細はドキュメントを参照。

`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.js 11で削除されました。これはnext/dynamicAPIをReact.lazyに近づけるためです。

これらのオプションを使用している場合はドキュメントを参照してください。

`Head.rewind`を削除

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

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

Moment.jsのロケール翻訳はデフォルトで除外されるようになり、バンドルサイズが最適化されました。特定のロケールを読み込むには:

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

moment.locale('ja')

この最適化を無効にするにはnext.config.jsにexcludeDefaultMomentLocales: falseを追加しますが、非推奨です。

`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が導入され、JSX使用時にimport React from 'react'が不要になりました。React 17ではNext.jsが自動的に新しい変換を使用します。codemodを使用して、誤ってReactをインポートせずに使用している箇所を修正できます。

Next.js 11ではReactの最小バージョンが17.0.2に更新されました。アップグレードするには:

npm install react@latest react-dom@latest

またはyarnの場合:

yarn add react@latest react-dom@latest

On this page