Codemods

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

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

使用方法

在終端機中，導航 (cd) 到您的專案資料夾，然後執行：

Terminal

npx @next/codemod <transform> <path>

將 <transform> 和 <path> 替換為適當的值。

transform - 轉換名稱
path - 要轉換的檔案或目錄
--dry 執行模擬運行，不會編輯程式碼
--print 列印變更後的輸出以供比較

Next.js Codemods

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