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

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

Terminal

npm i next@9

Terminal

yarn add next@9

Terminal

pnpm up next@9

Terminal

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 {
  // 削除してください、何もしていません！
  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>Loading</p>,
  }
)

`withAmp`はエクスポート設定オブジェクトに置き換えられました

Next.jsにはページレベルの設定の概念が導入されたため、一貫性のためにwithAmp高階コンポーネントは削除されました。

この変更はNext.jsプロジェクトのルートで以下のコマンドを実行することで自動的に移行できます：

Terminal

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を作成することで、以前の動作に戻すことができます：

next.config.js

module.exports = {
  trailingSlash: true,
}

変更前

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

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

カスタムAppファイル（`pages/_app.js`）の確認

破壊的変更

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

`config`キーがページのエクスポートになりました

`next/dynamic`はロード中にデフォルトで「loading...」を表示しなくなりました

`withAmp`はエクスポート設定オブジェクトに置き換えられました

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

`pages/api/`は異なる扱いになりました

非推奨機能

`next/dynamic`は複数モジュールの一括読み込みが非推奨になりました