Codemods

Codemodは、コードベースに対してプログラム的に実行される変換です。これにより、すべてのファイルを手動で確認することなく、大量の変更をプログラム的に適用できます。

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

使用方法

ターミナルでプロジェクトフォルダに移動（cd）してから、以下を実行します：

Terminal

npx @next/codemod <transform> <path>

<transform>と<path>を適切な値に置き換えてください。

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

Codemods

16.0

App Routerのページとレイアウトから`experimental_ppr` Route Segment Configを削除

`remove-experimental-ppr`

Terminal

npx @next/codemod@latest remove-experimental-ppr .

このcodemodは、App Routerのページとレイアウトからexperimental_ppr Route Segment Configを削除します。

app/page.tsx

- export const experimental_ppr = true;

安定化されたAPIから`unstable_`プレフィックスを削除

`remove-unstable-prefix`

Terminal

npx @next/codemod@latest remove-unstable-prefix .

このcodemodは、安定化されたAPIからunstable_プレフィックスを削除します。

例えば：

import { unstable_cacheTag as cacheTag } from 'next/cache'
 
cacheTag()

以下に変換されます：

import { cacheTag } from 'next/cache'
 
cacheTag()

廃止予定の`middleware`規則から`proxy`へ移行

`middleware-to-proxy`

Terminal

npx @next/codemod@latest middleware-to-proxy .

このcodemodは、廃止予定のmiddleware規則からproxy規則への使用へプロジェクトを移行します。以下を実行します：

middleware.<extension>をproxy.<extension>にリネーム（例：middleware.tsからproxy.ts）
名前付きエクスポートmiddlewareをproxyにリネーム
Next.jsの設定プロパティexperimental.middlewarePrefetchをexperimental.proxyPrefetchにリネーム
Next.jsの設定プロパティexperimental.middlewareClientMaxBodySizeをexperimental.proxyClientMaxBodySizeにリネーム
Next.jsの設定プロパティexperimental.externalMiddlewareRewritesResolveをexperimental.externalProxyRewritesResolveにリネーム
Next.jsの設定プロパティskipMiddlewareUrlNormalizeをskipProxyUrlNormalizeにリネーム

例えば：

middleware.ts

import { NextResponse } from 'next/server'
 
export function middleware() {
  return NextResponse.next()
}

以下に変換されます：

proxy.ts

import { NextResponse } from 'next/server'
 
export function proxy() {
  return NextResponse.next()
}

`next lint`からESLint CLIへ移行

`next-lint-to-eslint-cli`

Terminal

npx @next/codemod@canary next-lint-to-eslint-cli .

このcodemodは、next lintから、ローカルESLint設定でESLint CLIへ使用を移行するプロジェクトを移行します。以下を実行します：

Next.js推奨設定を使用してeslint.config.mjsファイルを作成
next lintの代わりにeslint .を使用するようにpackage.jsonスクリプトを更新
必要なESLint依存関係をpackage.jsonに追加
既存のESLint設定が見つかった場合、それらを保持

例えば：

package.json

{
  "scripts": {
    "lint": "next lint"
  }
}

以下になります：

package.json

{
  "scripts": {
    "lint": "eslint ."
  }
}

そして以下を作成します：

eslint.config.mjs

import { dirname } from 'path'
import { fileURLToPath } from 'url'
import { FlatCompat } from '@eslint/eslintrc'
 
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
 
const compat = new FlatCompat({
  baseDirectory: __dirname,
})
 
const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
  {
    ignores: [
      'node_modules/**',
      '.next/**',
      'out/**',
      'build/**',
      'next-env.d.ts',
    ],
  },
]
 
export default eslintConfig

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 Configruntime値の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は、現在は非同期である動的API（next/headersからcookies()、headers()、draftMode()）を適切に待機するか、該当する場合はReact.use()でラップするよう変換します。自動移行が不可能な場合、codemodは（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,
  type UnsafeUnwrappedHeaders,
} from 'next/headers'
const token = (cookies() as unknown as UnsafeUnwrappedCookies).get('token')
 
function useToken() {
  const token = use(cookies()).get('token')
  return token
}
 
export default async function Page() {
  const name = (await cookies()).get('name')
}
 
function getHeader() {
  return (headers() as unknown as UnsafeUnwrappedHeaders).get('x-foo')
}

ページ・ルートエントリ（page.js、layout.js、route.js、default.js）またはgenerateMetadata/generateViewport APIのparamsまたはsearchParamsプロップのプロパティアクセスを検出した場合、呼び出しサイトを同期から非同期関数に変換し、プロパティアクセスを待機しようとします。非同期にできない場合（Client Componentなど）、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 } }) {
  const { slug } = params
  return {
    title: `My Page - ${slug}`,
  }
}

以下に変換されます：

// page.tsx
export default async function Page(props: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const searchParams = await props.searchParams
  const { value } = searchParams
  if (value === 'foo') {
    // ...
  }
}
 
export async function generateMetadata(props: {
  params: Promise<{ slug: string }>
}) {
  const params = await props.params
  const { slug } = params
  return {
    title: `My Page - ${slug}`,
  }
}

補足：この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は、動的OG画像生成の使用のため、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'は'next/legacy/image'になります
import Image1 from 'next/legacy/image'
// 'next/future/image'は'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へ危険に移行します。インラインスタイルを追加し、未使用のプロップを削除します。

layoutプロップを削除し、styleを追加します。
objectFitプロップを削除し、styleを追加します。
objectPositionプロップを削除し、styleを追加します。
lazyBoundaryプロップを削除します。
lazyRootプロップを削除します。

Link コンポーネントから`<a>`タグを削除

`new-link`

Terminal

npx @next/codemod@latest new-link .

Link コンポーネント内の<a>タグを削除します。

例えば：

<Link href="/about">
  <a>About</a>
</Link>
// 以下に変換されます
<Link href="/about">
  About
</Link>
 
<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// 以下に変換されます
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

11

CRAから移行

`cra-to-next`

Terminal

npx @next/codemod cra-to-next

Create React AppプロジェクトをNext.jsに移行します。Pages Routerと動作に一致するために必要な設定を作成します。クライアント側のみのレンダリングは、SSR中のwindow使用により互換性の破損を防ぐために最初に活用され、Next.js固有の機能の段階的な採用を可能にするようにシームレスに有効にできます。

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

10

Reactインポートを追加

`add-missing-react-import`

Terminal

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

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

例えば：

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サポートとこのcodemodはNext.js 16で削除されました。

AMP HOCをページ設定に変換

`withamp-to-config`

Terminal

npx @next/codemod withamp-to-config

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

例えば：

// 変換前
import { withAmp } from 'next/amp'
 
function Home() {
  return <h1>My AMP Page</h1>
}
 
export default withAmp(Home)

// 変換後
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プロパティを、それが注入するrouterプロパティでwithRouterの使用に変換します。詳細はこちらをご覧ください：https://nextjs.org/docs/messages/url-deprecated

例えば：

変換前

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

変換後

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

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