Lang x Lang

︙

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>タグを削除する

Terminal
npx @next/codemod@latest new-link .

Link コンポーネント内の <a> タグを削除するか、自動修正できないリンクに 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>
  }
}
To
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__ ディレクトリ で見つけることができます。

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use