バージョン 9 にアップグレードする方法

バージョン 9 にアップグレードするには、次のコマンドを実行してください

npm i next@9

yarn add next@9

pnpm up next@9

bun add next@9

知っておくと良いこと：TypeScriptを使用している場合は、@types/react と @types/react-dom も対応するバージョンにアップグレードしてください。

カスタム App ファイル (`pages/_app.js`) を確認してください

以前にカスタム <App> の例をコピーした場合、getInitialProps を削除できる可能性があります。

pages/_app.js から getInitialProps を削除すること（可能な場合）は、新しい Next.js の機能を利用するために重要です！

以下の getInitialProps は何も行わず、削除される可能性があります

class MyApp extends App {
  // Remove me, I do nothing!
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}
 
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
 
    return { pageProps }
  }
 
  render() {
    // ... etc
  }
}

破壊的変更

`@zeit/next-typescript` は不要になりました

Next.js は @zeit/next-typescript の使用を無視し、削除するよう警告します。next.config.js からこのプラグインを削除してください。

カスタム .babelrc (存在する場合) から @zeit/next-typescript/babel への参照を削除してください。

fork-ts-checker-webpack-pluginの使用も next.config.js から削除する必要があります。

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..." をレンダリングしなくなりました

Dynamic コンポーネントは、読み込み中にデフォルトでは何もレンダリングしません。loading プロパティを設定することで、この動作をカスタマイズできます。

import dynamic from 'next/dynamic'
 
const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>Loading</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

この移行を手動で行うか、codemod が生成する内容を表示するには、以下を参照してください。

変更前

import { withAmp } from 'next/amp'
 
function Home() {
  return <h1>My AMP Page</h1>
}
 
export default withAmp(Home)
// or
export default withAmp(Home, { hybrid: true })

変更後

export default function Home() {
  return <h1>My AMP Page</h1>
}
 
export const config = {
  amp: true,
  // or
  amp: 'hybrid',
}

`next export` は、ページを `index.html` としてエクスポートしなくなりました

以前は、pages/about.js をエクスポートすると out/about/index.html が生成されていました。この動作は、out/about.html を生成するように変更されました。

以前の動作に戻すには、以下の内容で next.config.js を作成します

module.exports = {
  trailingSlash: true,
}