コードモッド

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

Next.jsは、APIが更新または非推奨になった際に、コードベースのアップグレードを支援するCodemod変換を提供しています。

使用方法

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

Terminal

npx @next/codemod <transform> <path>

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

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

Codemods

15.0

アプリルーターのルートセグメント設定 `runtime` 値を `experimental-edge` から `edge` に変換

`app-dir-runtime-config-experimental-edge`

注意: このコードmodはApp Router専用です。

Terminal

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

このコードmodは、ルートセグメント設定 runtimeの値 experimental-edge を edge に変換します。

例：

export const runtime = 'experimental-edge'

変換後：

export const runtime = 'edge'

非同期ダイナミックAPIへの移行

動的レンダリングにオプトインし、以前は同期アクセスをサポートしていたAPIが、現在は非同期になっています。この重大な変更の詳細は、アップグレードガイドをお読みください。

`next-async-request-api`

Terminal

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

このコードmodは、現在非同期になった動的API（next/headersのcookies()、headers()、draftMode()）を、適切にawaitするか、該当する場合はReact.use()でラップするように変換します。自動マイグレーションが不可能な場合、コードmodは型キャスト（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')
}

ページ/ルートエントリ（page.js、layout.js、route.js、またはdefault.js）またはgenerateMetadata / generateViewport APIで、paramsまたはsearchParamsプロパティへのプロパティアクセスを検出した場合、呼び出し元を同期から非同期関数に変換し、プロパティアクセスをawaitしようとします。クライアントコンポーネントなどで非同期にできない場合は、React.useを使用してプロミスをアンラップします。

例：

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

補足： このコードmodが手動介入の可能性がある箇所を特定したものの、正確な修正を判断できない場合、コードにコメントまたは型キャストを追加して、手動で更新する必要があることを通知します。これらのコメントは @next/codemod を接頭辞とし、型キャストは UnsafeUnwrapped を接頭辞とします。これらのコメントを明示的に削除するまで、ビルドはエラーになります。詳細を読む。

`NextRequest`の`geo`および`ip`プロパティを`@vercel/functions`に置き換え

`next-request-geo-ip`

Terminal

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

このコードmodは@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 .

このコードmodは、動的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 .

このコードmodは、特定のビューポートメタデータを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 .

このコードmodは@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 Componentへの移行

`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> タグを削除するか、自動修正できないリンクに legacyBehavior プロパティを追加します。

例：

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

自動修正が適用できない場合、legacyBehavior プロパティが追加されます。これにより、そのリンクに対して古い動作を続けて使用できます。

const Component = () => <a>About</a>
 
<Link href="/about">
  <Component />
</Link>
// 以下のように変換
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

CRAからの移行

`cra-to-next`

Terminal

npx @next/codemod cra-to-next

Create React AppプロジェクトをNext.jsに移行します。Pages ルーターと、動作に合わせて必要な設定を作成します。最初はクライアントサイドのみのレンダリングを利用し、SSR中の window 使用による互換性の破壊を防ぎ、Next.js固有の機能の段階的な採用を可能にします。

この変換に関するフィードバックはこのディスカッションでお聞かせください。

10

React インポートの追加

`add-missing-react-import`

Terminal

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

新しい React JSX変換を動作させるために、React をインポートしていないファイルを変換します。

例：

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のページ設定に変換します。

例：

// 変換前
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 プロパティを、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>
  }
}

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__ディレクトリにあります。