バージョン 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 を使用した新しい組み込みサポートに移行するか、機能を無効にすることができます。

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` を削除しますで詳細をご覧ください。

ページコンポーネントから`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は提供されなくなりました。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 17では新しいJSX変換が導入されました。これは、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

バージョン 11

pages/_app.js から Container を削除します ドキュメントで詳細をご覧ください。

`pages/_app.js` から `Container` を削除しますで詳細をご覧ください。