Codemods (コードモッド)

Codemods（コードモッド）は、コードベースに対してプログラム的に変換を実行するツールです。これにより、大量の変更を手動でファイルごとに修正することなく、プログラム的に適用できます。

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

使用方法

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

Terminal

npx @next/codemod <transform> <path>

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

transform - 変換名
path - 変換対象のファイルまたはディレクトリ
--dry ドライランを実行（コードは編集されません）
--print 変更後の出力を比較用に表示

Next.js Codemods

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 エクスポートに移行します。

例：

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

Create React Appからの移行

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

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

例：

変換前

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__ディレクトリで確認できます。

On this page