Zenn
🚀

【Next.js和訳】Advanced Features/Codemods

2021/10/02に公開・約3,400字
Next.js
tech

この記事について

この記事は、Advanced Features/Codemodsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Next.js Codemods

Next.js は Codemod トランスフォームを提供しており、ある機能が非推奨になったときに Next.js のコードベースをアップグレードするのに役立ちます。

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

使い方

<npx @next/codemod <transform> <path>

  • transform - トランスフォームの名前です、下記の利用可能なトランスフォームを参照してください。
  • path - 変換するファイルまたはディレクトリ
  • --dry コードを編集せずに、ドライランを行います。
  • --print 変更後の出力を比較のために表示します。

Next.js 11

cra-to-next (experimental)

Create React App プロジェクトを Next.js に移行し、pages ディレクトリと必要な設定を作成して動作を合わせます。クライアントサイドオンリーレンダリングは、SSR 時に window を使用することによる互換性の低下を防ぐために最初に利用されますが、Next.js 特有の機能を徐々に採用できるように、シームレスに有効化することができます。

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

Next.js 10

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

Next.js 9

name-default-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>
}

このコンポーネントは、ファイル名に基づいたキャメルケースの名前を持ち、また、矢印の関数も動作します。

使い方

プロジェクトにアクセスする

cd path-to-your-project/

codemod を実行します。

npx @next/codemod name-default-component

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

使い方

あなたのプロジェクトに移動します

cd Path-to-your-project/

codemod を実行します。

npx @next/codemod withamp-to-config

Next.js 6

url-to-withrouter

トップレベルのページで自動的に注入される url プロパティが非推奨となっていますが、これを withRouter とそれが注入する router プロパティを使用するように変更します。詳しくはこちらをご覧ください。

例えば、以下のようになります。

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

使い方

自分のプロジェクトにアクセスする

cd path-to-your-project/

codemod を実行します。

npx @next/codemod url-to-withrouter

Discussion

ログインするとコメントできます