バージョン11

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

Terminal

npm install next@11

yarn add next@11

Webpack 5

Webpack 5がすべてのNext.jsアプリケーションのデフォルトになりました。カスタムwebpack設定を持っていない場合、アプリケーションはすでにwebpack 5を使用しています。カスタムwebpack設定がある場合は、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で非推奨となり、不要になったため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はプリレンダリング中に提供されなくなりました。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が提供していた機能（JSX使用時にimport React from 'react'が必要ない）がReactエコシステム全体に広がりました。React 17を使用すると、Next.jsは自動的に新しいトランスフォームを使用します。このトランスフォームは、以前のNext.js実装の意図しない副作用であったReact変数をグローバルにしません。Reactをインポートせずに誤って使用した場合に自動的に修正するコードモッドが利用可能です。

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

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

npm install react@latest react-dom@latest

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

yarn add react@latest react-dom@latest