【Next.js和訳】Advanced Features/Codemods
この記事について
この記事は、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
をインポートしていないファイルにインポートを含めるように変換します。
例えば、以下のようになります。
export default class Home extends React.Component {
render() {
return <div>Hello World</div>
}
}
以下に変換します。
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で動作するようにします。
例えば、以下のようになります。
export default function () {
return <div>Hello World</div>
}
以下に変換します。
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