introduction

Next.js 提供了Codemod 转换去帮助升级你的Next.js 代码基(当一个特性被废弃时) ..

Codemods 将在你的代码基上自动的运行转换 …

这允许较大的改变被应用而无需手动处理每一个文件 ..

使用

npx @next/codemod <transform> <path>

• transform转换的名称,查看下面必要的转换
• path转换的文件或者目录
• --dry

仅运行,没有任何代码将会被编辑 …

• --print编译中打印改变的输出

Next.js 11

cra-to-next实验性

将“创建 React 应用”项目迁移到“next.js”;创建页面目录和必要的配置以匹配行为。最初利用仅客户端呈现来防止由于在 SSR 期间使用窗口而破坏兼容性，并且可以无缝启用以允许逐步采用 Next.js 特定功能。

Next.js 10

add-missing-react-import

转换没有导入React的文件去包括导入为了新的 React JSX transform 能够工作 ..

例如:

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

转换匿名组件到命名组件去确保它们能够与快速刷新一起工作 ..

例如:

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

npx @next/codemod name-default-component

withamp-toconfig

带有withAmpHoc(高阶组件) 进行转换为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,
}

使用

cd path-to-your-project
npx @next/codemod withamp-to-config

Next.js 6

url-to-withrouter

通过使用withRouter以及并注入它到router 属性中(转换顶级页面注入的属性url)

了解更多,为什么要这样做: 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>
    }
  }
)

这是一种情况,所有转换并测试过的情况能够在<font style="color:rgb(17, 17, 17);"> </font>[__testfixtures__](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter)目录中发现 ..

使用

cd path-to-your-project
npx @next/codemod url-to-withrouter