コンテンツへスキップ
アプリケーションの構築アップグレードバージョン 9

バージョン 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 {
  // 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プロパティを設定することで、この動作をカスタマイズできます。

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

手動で移行する場合、またはコードモッドが生成する内容を確認する場合は、以下を参照してください。

変更前

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

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