Version 9
バージョン 9 にアップグレードするには、次のコマンドを実行します:
npm i next@9
yarn add next@9
pnpm up next@9
bun add next@9
補足: TypeScriptを使用している場合、
@types/react
と@types/react-dom
も対応するバージョンにアップグレードしてください。
Vercel での本番デプロイ
以前に vercel.json
ファイルで動的ルートの routes
を設定していた場合、Next.js 9 の新しい動的ルーティング機能を活用することで、これらのルールを削除できます。
Next.js 9 の動的ルートは、Vercelで自動的に設定され、vercel.json
のカスタマイズは不要です。
動的ルーティングについてはこちらをお読みください。
カスタムアプリファイル(pages/_app.js
)の確認
以前にカスタム <App>
の例をコピーしていた場合、getInitialProps
を削除できる可能性があります。
pages/_app.js
から getInitialProps
を削除することは(可能な限り)、新しい Next.js の機能を活用するために重要です!
以下の getInitialProps
は何もしないため、削除できます:
class MyApp extends App {
// 削除してください。何もしていません!
static async getInitialProps({ Component, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
}
render() {
// ... など
}
}
破壊的変更
@zeit/next-typescript
は不要になりました
Next.js は @zeit/next-typescript
の使用を無視し、削除するよう警告します。next.config.js
からこのプラグインを削除してください。
カスタムの .babelrc
(存在する場合)から @zeit/next-typescript/babel
への参照を削除してください。
next.config.js
から fork-ts-checker-webpack-plugin
の使用も削除する必要があります。
TypeScriptの定義は next
パッケージと共に公開されるため、競合するため @types/next
をアンインストールする必要があります。
以下の型が異なります:
このリストはコミュニティによって作成され、アップグレードを支援するものです。他の違いが見つかった場合は、他のユーザーを支援するためにこのリストにプルリクエストを送信してください。
変更前:
import { NextContext } from 'next'
import { NextAppContext, DefaultAppIProps } from 'next/app'
import { NextDocumentContext, DefaultDocumentIProps } from 'next/document'
変更後:
import { NextPageContext } from 'next'
import { AppContext, AppInitialProps } from 'next/app'
import { DocumentContext, DocumentInitialProps } from 'next/document'
config
キーはページからのエクスポートになりました
ページから config
という名前のカスタム変数をエクスポートすることはできなくなりました(export { config }
/ export const config ...
)。
このエクスポートされた変数は、オプトインAMPやAPIルート機能などのページレベルのNext.js設定を指定するために使用されるようになりました。
Next.js以外の目的の config
エクスポートは、別の名前に変更する必要があります。
next/dynamic
はロード中に「loading...」をデフォルトでレンダリングしなくなりました
動的コンポーネントは、ロード中にデフォルトで何もレンダリングしません。loading
プロパティを設定することで、この動作をカスタマイズできます:
import dynamic from 'next/dynamic'
const DynamicComponentWithCustomLoading = dynamic(
() => import('../components/hello2'),
{
loading: () => <p>読み込み中</p>,
}
)
withAmp
は設定オブジェクトのエクスポートに置き換えられました
Next.js にはページレベルの設定の概念が導入されたため、一貫性のために withAmp
高階コンポーネントは削除されました。
この変更は、Next.js プロジェクトのルートで以下のコマンドを実行することで自動的に移行できます:
curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
手動で移行するか、コードモッドが生成する内容を確認するには、以下を参照してください:
変更前
import { withAmp } from 'next/amp'
function Home() {
return <h1>My AMP Page</h1>
}
export default withAmp(Home)
// または
export default withAmp(Home, { hybrid: true })
変更後
export default function Home() {
return <h1>My AMP Page</h1>
}
export const config = {
amp: true,
// または
amp: 'hybrid',
}
next export
はページを index.html
としてエクスポートしなくなりました
以前は、pages/about.js
をエクスポートすると out/about/index.html
になっていました。この動作は out/about.html
になるように変更されました。
next.config.js
に以下の内容を作成することで、以前の動作に戻すことができます:
module.exports = {
trailingSlash: true,
}
pages/api/
は異なる扱いになりました
pages/api/
のページは、APIルートと見なされるようになりました。
このディレクトリのページには、クライアント側のバンドルが含まれなくなります。
非推奨の機能
next/dynamic
は複数のモジュールを一度に読み込むことを非推奨としました
一度に複数のモジュールを読み込む機能は、React の実装(React.lazy
と Suspense
)に近づけるために、next/dynamic
で非推奨となりました。
この動作に依存するコードの更新は比較的簡単です!アプリケーションを移行するのに役立つ、変更前後の例を提供します:
変更前
import dynamic from 'next/dynamic'
const HelloBundle = dynamic({
modules: () => {
const components = {
Hello1: () => import('../components/hello1').then((m) => m.default),
Hello2: () => import('../components/hello2').then((m) => m.default),
}
return components
},
render: (props, { Hello1, Hello2 }) => (
<div>
<h1>{props.title}</h1>
<Hello1 />
<Hello2 />
</div>
),
})
function DynamicBundle() {
return <HelloBundle title="Dynamic Bundle" />
}
export default DynamicBundle
変更後
import dynamic from 'next/dynamic'
const Hello1 = dynamic(() => import('../components/hello1'))
const Hello2 = dynamic(() => import('../components/hello2'))
function HelloBundle({ title }) {
return (
<div>
<h1>{title}</h1>
<Hello1 />
<Hello2 />
</div>
)
}
function DynamicBundle() {
return <HelloBundle title="Dynamic Bundle" />
}
export default DynamicBundle