Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

Version 11

version 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.jscleanDistDir: falseフラグを追加することで、新しいデフォルト動作を無効にできます。

next devnext startPORTがサポート

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.jsnext/appからContainerをインポートしている場合は、削除されたためContainerを削除できます。詳細はドキュメントを参照してください。

ページコンポーネントからprops.urlの使用を削除

このプロパティは、Next.js 4で非推奨となり、その後開発中に警告が表示されていました。getStaticProps / getServerSidePropsの導入により、これらのメソッドは既にprops.urlの使用を禁止していました。Next.js 11では、完全に削除されました。

詳細はドキュメントを参照してください。

next/imageunsizedプロパティを削除

next/imageunsizedプロパティは、Next.js 10.0.1で非推奨となりました。代わりにlayout="fill"を使用できます。Next.js 11でunsizedは削除されました。

next/dynamicmodulesプロパティを削除

next/dynamicmodulesrenderオプションは、Next.js 9.5で非推奨となりました。これはnext/dynamic APIをReact.lazyに近づけるために行われました。Next.js 11では、modulesrenderオプションが削除されました。

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

アプリケーションでmodulesrenderを使用している場合は、ドキュメントを参照してください。

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.jsexcludeDefaultMomentLocales: falseを追加できます。この新しい最適化によりMoment.jsのサイズが大幅に削減されるため、無効にしないことを強くお勧めします。

router.eventsの使用を更新

レンダリング中にrouter.eventsにアクセスしている場合、Next.js 11では、プリレンダリング中にrouter.eventsが提供されなくなりました。useEffectrouter.eventsにアクセスしていることを確認してください:

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 16から17

React 17は、長年のNext.jsの機能をReactエコシステムに導入する新しいJSXトランスフォームを導入しました: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