Codemods

Codemods 是以程式化方式在程式碼庫中執行的轉換工具。這允許大量變更能透過程式自動套用，而無需手動檢查每個檔案。

Next.js 提供 Codemod 轉換功能，協助您在 API 更新或棄用時升級 Next.js 程式碼庫。

使用方法

在終端機中，導航 (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 元數據遷移至 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.js 13 中的 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> 標籤，或為無法自動修復的 Links 添加 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

從 CRA 遷移

`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 的檔案，使其包含導入以支援新的 React JSX 轉換。

例如：

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