Version 11
version 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
フラグを追加することで、新しいデフォルト動作を無効にできます。
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
を使用した新しい組み込みサポートに移行するか、機能を無効にできます:
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
が提供されなくなりました。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)
// コンポーネントがアンマウントされた場合、
// `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