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

`distDir`のクリーニングがデフォルトになりました

ビルド出力ディレクトリ（デフォルトは.next）は、Next.jsのキャッシュを除いてデフォルトでクリアされるようになりました。詳細については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.js 9でnext/appコンポーネントのcomponentDidCatchは不要になり、非推奨となりました。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をインポートしている場合は、削除されたため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以降、何も実行しない関数となっており、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が提供されなくなりました。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)
 
  // コンポーネントがアンマウントされた場合、
  // `off`メソッドでイベントの登録を解除します：
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

アプリケーションが内部プロパティで公開されていなかったrouter.router.eventsを使用している場合は、router.eventsを使用するように変更してください。

React 17では、新しいJSX Transformが導入され、長い間Next.jsの機能だったものがより広いReactエコシステムに取り入れられました：JSXを使用する際にimport React from '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