メインコンテンツまでスキップ

Codemods

Codemodsは、コードベースに対してプログラム的に実行される変換です。これにより、多数の変更を手作業で各ファイルを調べることなくプログラムによって適用できます。

Next.jsは、APIが更新または廃止された場合にあなたのNext.jsコードベースをアップグレードするのを助けるためにCodemod変換を提供します。

使用法​

ターミナルで、プロジェクトのフォルダーに移動し（cd）、次のコマンドを実行します：

Terminal
npx @next/codemod <transform> <path>

<transform>と<path>を適切な値に置き換えます。

  • transform - 変換の名前
  • path - 変換するファイルまたはディレクトリ
  • --dry ドライランを実行しますが、コードは編集されません
  • --print 変更された出力を比較用に表示します

Codemods​

15.0​

App Router Route Segment Configのruntime値をexperimental-edgeからedgeに変換​

app-dir-runtime-config-experimental-edge​

注意: このcodemodはApp Router専用です。

Terminal
npx @next/codemod@latest app-dir-runtime-config-experimental-edge .

このcodemodは、Route Segment Config runtimeの値をexperimental-edgeからedgeに変換します。

例えば：

export const runtime = 'experimental-edge'

は以下に変換されます：

export const runtime = 'edge'

非同期Dynamic APIへの移行​

動的レンダリングを選んでいたAPIで、以前は同期アクセスをサポートしていたものが非同期になりました。詳細な破壊的変更についてはアップグレードガイドをご覧ください。

next-async-request-api​
Terminal
npx @next/codemod@latest next-async-request-api .

このcodemodは、現在非同期であるdynamic APIs（cookies(), headers(), draftMode() from next/headers）を適切にawaitさせるか、適用可能であればReact.use()でラップします。 自動移行が不可能な場合、TypeScriptファイルであれば型キャストを追加するか、手動でレビュー＆更新する必要があることをユーザーに知らせるコメントを追加します。

例えば：

import { cookies, headers } from 'next/headers'
const token = cookies().get('token')

function useToken() {
  const token = cookies().get('token')
  return token
}

export default function Page() {
  const name = cookies().get('name')
}

function getHeader() {
  return headers().get('x-foo')
}

は以下に変換されます：

import { use } from 'react'
import { cookies, headers, type UnsafeUnwrappedCookies } from 'next/headers'

const token = (await cookies()).get('token')

function useToken() {
  const token = use(cookies()).get('token')
  return token
}

export default function Page() {
  const name = (await cookies()).get('name')
}

function getHeader() {
  return (headers() as UnsafeUnwrappedCookies).get('x-foo')
}

paramsやsearchParamsプロップに対するプロパティアクセスがページ／ルートエントリー（page.js, layout.js, route.js, またはdefault.js）やgenerateMetadata／generateViewport APIsで検出された場合、それを同期から非同期の関数に変換し、プロパティアクセスをawaitするよう試みます。非同期化できない場合（例えば、クライアントコンポーネントの場合）、React.useを使用してPromiseをアンラップします。

例えば：

// page.tsx
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  const { value } = searchParams
  if (value === 'foo') {
    // ...
  }
}

export function generateMetadata({ params }: { params: { slug: string } }) {
  return {
    title: `My Page - ${slug}`,
  }
}

は以下に変換されます：

// page.tsx
export default function Page(props: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  const { value } = await props.searchParams
  if (value === 'foo') {
    // ...
  }
}

export function generateMetadata(props: { params: { slug: string } }) {
  const { slug } = await props.params
  return {
    title: `My Page - ${slug}`,
  }
}

Good to know: このcodemodが修正されるべき場所を特定したが、正確な修正を決定できない場合、コードにコメントまたは型キャストを追加してユーザーに手動更新が必要であることを知らせます。これらのコメントは**@next/codemod**で始まり、型キャストはUnsafeUnwrappedで始まります。 あなたのビルドは、これらのコメントが明示的に削除されるまでエラーになります。詳細はこちら.

NextRequestのgeoとipプロパティを@vercel/functionsで置き換える​

next-request-geo-ip​
Terminal
npx @next/codemod@latest next-request-geo-ip .

このcodemodは、@vercel/functionsをインストールし、NextRequestのgeoとipプロパティを対応する@vercel/functions機能で変換します。

例えば：

import type { NextRequest } from 'next/server'

export function GET(req: NextRequest) {
  const { geo, ip } = req
}

は以下に変換されます：

import type { NextRequest } from 'next/server'
import { geolocation, ipAddress } from '@vercel/functions'

export function GET(req: NextRequest) {
  const geo = geolocation(req)
  const ip = ipAddress(req)
}

14.0​

ImageResponseインポートを移行​

next-og-import​
Terminal
npx @next/codemod@latest next-og-import .

このcodemodはDynamic OG Image Generationの利用に向けて、インポートをnext/serverからnext/ogに移動します。

例えば：

import { ImageResponse } from 'next/server'

は以下に変換されます：

import { ImageResponse } from 'next/og'

viewportエクスポートを使用​

metadata-to-viewport-export​
Terminal
npx @next/codemod@latest metadata-to-viewport-export .

このcodemodは、特定のviewportメタデータをviewportエクスポートに移行します。

例えば：

export const metadata = {
  title: 'My App',
  themeColor: 'dark',
  viewport: {
    width: 1,
  },
}

は以下に変換されます：

export const metadata = {
  title: 'My App',
}

export const viewport = {
  width: 1,
  themeColor: 'dark',
}

13.2​

組み込みフォントを使用​

built-in-next-font​
Terminal
npx @next/codemod@latest built-in-next-font .

このcodemodは@next/fontパッケージをアンインストールし、@next/fontインポートを組み込みのnext/fontに変換します。

例えば：

import { Inter } from '@next/font/google'

は以下に変換されます：

import { Inter } from 'next/font/google'

13.0​

Next Imageインポートをリネーム​

next-image-to-legacy-image​
Terminal
npx @next/codemod@latest next-image-to-legacy-image .

既存のNext.js 10、11、または12アプリケーションのnext/imageインポートをNext.js 13でnext/legacy/imageに安全にリネームします。また、next/future/imageをnext/imageにリネームします。

例えば：

pages/index.js
import Image1 from 'next/image'
import Image2 from 'next/future/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

は以下に変換されます：

pages/index.js
// 'next/image' becomes 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' becomes 'next/image'
import Image2 from 'next/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

新しいImageコンポーネントへの移行​

next-image-experimental​
Terminal
npx @next/codemod@latest next-image-experimental .

next/legacy/imageから新しいnext/imageに危険な移行を行い、インラインスタイルを追加し、未使用のpropsを削除します。

  • layout propを削除し、styleを追加します
  • objectFit propを削除し、styleを追加します
  • objectPosition propを削除し、styleを追加します
  • lazyBoundary propを削除します
  • lazyRoot propを削除します
Terminal
npx @next/codemod@latest new-link .

リンクコンポーネント内の<a>タグを削除するか、自動修正が不可能なリンクにlegacyBehavior propを追加します。

例えば：

<Link href="/about">
  <a>About</a>
</Link>
// transforms into
<Link href="/about">
  About
</Link>

<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// transforms into
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

自動修正が適用できない場合、legacyBehavior propが追加されます。これにより、その特定のリンクに対して古い動作を使用してあなたのアプリが機能を維持することができます。

const Component = () => <a>About</a>

<Link href="/about">
  <Component />
</Link>
// becomes
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11​

CRAからの移行​

cra-to-next​
Terminal
npx @next/codemod cra-to-next

Create React AppプロジェクトをNext.jsに移行し、Pages Routerと動作を一致させるための必要な設定を作成します。クライアントサイドのみのレンダリングが最初に活用され、SSR中のwindowの使用による互換性の破壊を防ぎ、Next.jsの特定の機能を徐々に採用することが可能となります。

この変換に関するフィードバックをこちらのディスカッションで共有してください。

10​

Reactインポートを追加​

add-missing-react-import​
Terminal
npx @next/codemod add-missing-react-import

Reactをインポートしていないファイルを変換し、新しいReact JSX変換が機能するためにインポートを追加します。

例えば：

my-component.js
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

は以下に変換されます：

my-component.js
import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

9​

無名コンポーネントを名前付きコンポーネントに変換​

name-default-component​
Terminal
npx @next/codemod name-default-component

バージョン9以上。

無名コンポーネントを名前付きコンポーネントに変換し、Fast Refreshで動作するようにします。

例えば：

my-component.js
export default function () {
  return <div>Hello World</div>
}

は以下に変換されます：

my-component.js
export default function MyComponent() {
  return <div>Hello World</div>
}

コンポーネントには、ファイル名に基づいてキャメルケースの名前が付けられ、矢印関数でも動作します。

8​

AMP HOCをページ設定に変換​

withamp-to-config​
Terminal
npx @next/codemod withamp-to-config

withAmp HOCをNext.js 9のページ設定に変換します。

例えば：

// Before
import { withAmp } from 'next/amp'

function Home() {
  return <h1>My AMP Page</h1>
}

export default withAmp(Home)
// After
export default function Home() {
  return <h1>My AMP Page</h1>
}

export const config = {
  amp: true,
}

6​

withRouterを使用​

url-to-withrouter​
Terminal
npx @next/codemod url-to-withrouter

トップレベルのページに自動的に注入されるurlプロパティを、非推奨のwithRouterとそれが注入するrouterプロパティを使用するように変換します。詳細はこちらをご覧ください：https://nextjs.org/docs/messages/url-deprecated

例えば：

From
import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Current pathname: {pathname}</div>
  }
}
To
import React from 'react'
import { withRouter } from 'next/router'
export default withRouter(
  class extends React.Component {
    render() {
      const { pathname } = this.props.router
      return <div>Current pathname: {pathname}</div>
    }
  }
)

これは1つのケースです。変換され（およびテストされた）すべてのケースは、__testfixtures__ディレクトリで見つけることができます。