バージョン 11 へのアップグレード方法
バージョン 11 にアップグレードするには、次のコマンドを実行してください。
npm i next@11 react@17 react-dom@17yarn add next@11 react@17 react-dom@17pnpm up next@11 react@17 react-dom@17bun 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 を使用した新しい組み込みサポートに移行するか、機能を無効にすることができます。
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 を削除できます。詳細はドキュメントをご覧ください。
page コンポーネントでの 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)
// 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 16 から 17 へ
React 17 は、長年 Next.js の機能であった新しい JSX Transform を導入しました。これにより、JSX を使用する際に import React from '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
役に立ちましたか？