コードモッド

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

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

使い方

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

ターミナル

npx @next/codemod <transform> <path>

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

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

コードモッド

15.0

App Router ルートセグメント設定の `runtime` 値を `experimental-edge` から `edge` に変換する

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

注: このコードモッドは App Router 固有です。

ターミナル

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

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

例：

export const runtime = 'experimental-edge'

以下に変換されます。

export const runtime = 'edge'

非同期動的 API への移行

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

`next-async-request-api`

ターミナル

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

このコードモッドは、現在非同期になっている動的 API (next/headers の cookies()、headers()、および draftMode()) を、適切に 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')
}

ページ/ルートエントリー (page.js, layout.js, route.js, または default.js) または generateMetadata / generateViewport API の params または searchParams プロパティへのアクセスを検出すると、呼び出し箇所を同期関数から非同期関数に変換し、プロパティへのアクセスを 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}`,
  }
}

知っておくと良いこと: このコードモッドが手動での介入が必要になる可能性がある箇所を特定した場合でも、正確な修正を決定できない場合は、ユーザーに手動での更新が必要であることを知らせるコメントまたは型キャストをコードに追加します。これらのコメントには @next/codemod というプレフィックスが付き、型キャストには UnsafeUnwrapped というプレフィックスが付きます。これらのコメントを明示的に削除するまで、ビルドはエラーになります。詳細はこちら。

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

`next-request-geo-ip`

ターミナル

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

このコードモッドは、@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)
}

名前付きエクスポートにアクセスする `next/dynamic` インポートを、`default` プロパティを持つオブジェクトを返すように変換します

`next-dynamic-access-named-export`

ターミナル

npx @next/codemod@latest next-dynamic-access-named-export .

このコードモッドは、next/dynamic を使用した動的インポートを変換して、名前付きエクスポートにアクセスする際に default プロパティを持つオブジェクトを返すようにします。これにより、React.lazy との動作が一致し、サーバーコンポーネントのクライアントコンポーネントから名前付きエクスポートにアクセスする際の問題が解決されます。

例：

import dynamic from 'next/dynamic'
 
const ComponentA = dynamic(() =>
  import('../components/a').then((mod) => mod.default)
)
 
const ComponentB = dynamic(() =>
  import('../components/b').then((mod) => mod.ComponentB)
)

以下に変換されます。

import dynamic from 'next/dynamic'
 
const ComponentA = dynamic(() =>
  import('../components/a').then((mod) => ({ default: mod.default }))
)
 
const ComponentB = dynamic(() =>
  import('../components/b').then((mod) => ({ default: mod.ComponentB }))
)

知っておくと良いこと: このコードモッドは、next/dynamic を使用した動的インポートで、名前付きエクスポートにアクセスする場合にのみ影響します。

14.0

`ImageResponse` インポートを移行します

`next-og-import`

ターミナル

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

このコードモッドは、動的な OG 画像生成を使用するために、インポートを next/server から next/og に移行します。

例：

import { ImageResponse } from 'next/server'

以下に変換されます。

import { ImageResponse } from 'next/og'

`viewport` エクスポートを使用します

`metadata-to-viewport-export`

ターミナル

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

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

ターミナル

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

このコードモッドは、@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`

ターミナル

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`

ターミナル

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

next/legacy/image から新しい next/image に、インラインスタイルを追加し、未使用のプロパティを削除することで、危険を伴いながら移行します。

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

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

`new-link`

ターミナル

npx @next/codemod@latest new-link .

Linkコンポーネント内の<a>タグを削除するか、自動修正できないLinkにlegacyBehaviorプロップを追加してください。

例：

<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プロップが追加されます。これにより、アプリはその特定のリンクに対して古い動作を維持することができます。

const Component = () => <a>About</a>
 
<Link href="/about">
  <Component />
</Link>
// becomes
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

CRAからの移行

`cra-to-next`

ターミナル

npx @next/codemod cra-to-next

Create React AppプロジェクトをNext.jsに移行し、Pages Routerと動作を一致させるために必要な設定を作成します。クライアントサイドのみのレンダリングが初期段階で活用され、SSR中のwindowの使用による互換性の問題を回避し、Next.js固有の機能を徐々に採用できるようにシームレスに有効化できます。

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

10

Reactインポートを追加

`add-missing-react-import`

ターミナル

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

新しいReact JSX transformが機能するように、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`

ターミナル

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`

ターミナル

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`

ターミナル

npx @next/codemod url-to-withrouter

トップレベルページで非推奨になった自動注入されるurlプロパティを、withRouterとそれが注入するrouterプロパティを使用するように変換します。詳細はこちらをご覧ください：https://nextjs.dokyumento.jp/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__ディレクトリにあります。