︙

Codemods

Codemods はプログラム的にあなたの Code ベースで実行される変換です。これにより、すべてのファイルを手動で通過することなく、大量の number の変更をプログラム的に適用することが可能になります。

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

Usage

ターミナルで、プロジェクトのフォルダに移動(cd)してから、次のコマンドを実行してください：

Terminal

npx @next/codemod <transform> <path>

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

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

Next.js Codemods

14.0

`ImageResponse`のインポートを移行する

`next-og-import`

Terminal

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

この codemod は、[next/server]から[next/og]へのインポートを移動し、Dynamic OG Image Generationの使用のために変換します。

例:

import { ImageResponse } from "next/server";

に変身する：

import { ImageResponse } from "next/og";

`viewport`を export を使用する

`metadata-to-viewport-export`

Terminal

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

この codemod は、特定の viewport metadata をviewportの export に移行します。

例:

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/imageのインポートを既存の Next.js10、11、または 12 のアプリケーションで安全にnext/legacy/imageに名前を変更します。Next.js 13 では、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 Component に移行する

`next-image-experimental`

Terminal

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

next/legacy/imageから新しいnext/imageに危険な移行を行います。これは、インラインの styles を追加し、使用されていない props を削除することで行います。

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

LinkComponent から`<a>`タグを削除する

`new-link`

Terminal

npx @next/codemod@latest new-link .

Linkcomponent内の<a>タグを削除するか、自動修正できない Links に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プロップが追加されます。これにより、特定の link に対して古い動作を使用して、あなたの app が機能し続けることが可能となります。

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

React App プロジェクトを Next に移行し、Pages Router と必要な config を作成して振る舞いを合わせます。初期には、windowの使用により SSR の互換性が破損するのを防ぐために、Client 側のみのレンダリングが利用されます。そして、Next.js 特有の機能の段階的な導入を可能にするために、シームレスに有効化することができます。

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

10

React のインポートを追加

`add-missing-react-import`

Terminal

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

Reactを import しないファイルを変換して、新しいReact JSX transform が動作するように import を含めます。

例:

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

Transform 匿名 Component を名前付き Component に変換する

`name-default-component`

Terminal

npx @next/codemod name-default-component

バージョン 9 以上。

匿名の Component を名前付き Component に変換して、それらが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>
}

その component はファイルの名前に基づいてキャメルケースの名前を持ち、また、アロー関数でも機能します。

8

Transform AMP HOC をページの config に変換します

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

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__ ディレクトリで見つけることができます。