バージョン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 も対応するバージョンにアップグレードしてください。

Vercelへの本番環境デプロイ

以前に動的ルートのために vercel.json ファイルで routes を設定していた場合、Next.js 9の新しい動的ルーティング機能を利用すればこれらのルールは削除できます。

Next.js 9の動的ルートはVercel上で自動的に設定され、vercel.json のカスタマイズは不要です。

動的ルーティングについて詳しく読む

カスタム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 ...）。このエクスポート変数は、Opt-in 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へのアップグレード

Vercelへの本番環境デプロイ

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

破壊的変更

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

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

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

`withAmp` は廃止され、設定オブジェクトのエクスポートが推奨されます

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

`pages/api/` の扱いが変更されました

非推奨の機能

`next/dynamic` での複数モジュールの同時ロードが非推奨になりました

On this page