Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

Version 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 のカスタマイズは不要です。

動的ルーティングについてはこちらをお読みください。

カスタムアプリファイル(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 プロジェクトのルートで以下のコマンドを実行することで自動的に移行できます:

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,
}

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

pages/api/ のページは、APIルートと見なされるようになりました。 このディレクトリのページには、クライアント側のバンドルが含まれなくなります。

非推奨の機能

next/dynamic は複数のモジュールを一度に読み込むことを非推奨としました

一度に複数のモジュールを読み込む機能は、React の実装(React.lazySuspense)に近づけるために、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