代码修改器
代码修改器是通过编程方式在代码库上运行的转换。这允许以编程方式应用大量更改,而无需手动检查每个文件。
当 API 更新或弃用时,Next.js 提供代码修改器转换来帮助升级 Next.js 代码库。
用法
在您的终端中,导航 (cd
) 到您的项目的文件夹,然后运行
npx @next/codemod <transform> <path>
将 <transform>
和 <path>
替换为适当的值。
transform
- 转换的名称path
- 要转换的文件或目录--dry
进行空运行,不会编辑任何代码--print
打印更改后的输出以进行比较
代码修改
15.0
将应用路由器路由段配置 runtime
值从 experimental-edge
转换为 edge
此代码修改将转换现在异步的动态 API(来自 next/headers
的 cookies()
、headers()
和 draftMode()
),以便适当地等待或使用 React.use()
进行包装(如果适用)。当无法自动迁移时,代码修改将添加类型转换(如果是 TypeScript 文件)或注释以告知用户需要手动审查和更新。
例如
import { cookies, headers } from 'next/headers'
const token = cookies().get('token')
function useToken() {
const token = cookies().get('token')
return token
}
export default function Page() {
const name = cookies().get('name')
}
function getHeader() {
return headers().get('x-foo')
}
转换为
import { use } from 'react'
import { cookies, headers, type UnsafeUnwrappedCookies } from 'next/headers'
const token = (await cookies()).get('token')
function useToken() {
const token = use(cookies()).get('token')
return token
}
export default function Page() {
const name = (await cookies()).get('name')
}
function getHeader() {
return (headers() as UnsafeUnwrappedCookies).get('x-foo')
}
当我们在页面/路由条目(page.js
、layout.js
、route.js
或 default.js
)或 generateMetadata
/generateViewport
API 中检测到对 params
或 searchParams
属性的属性访问时,它将尝试将调用站点从同步函数转换为异步函数,并等待属性访问。如果无法使其异步(例如使用客户端组件),它将使用 React.use
来解包 Promise。
例如
// page.tsx
export default function Page({
params,
searchParams,
}: {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}) {
const { value } = searchParams
if (value === 'foo') {
// ...
}
}
export function generateMetadata({ params }: { params: { slug: string } }) {
return {
title: `My Page - ${slug}`,
}
}
转换为
// page.tsx
export default function Page(props: {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}) {
const { value } = await props.searchParams
if (value === 'foo') {
// ...
}
}
export function generateMetadata(props: { params: { slug: string } }) {
const { slug } = await props.params
return {
title: `My Page - ${slug}`,
}
}
须知:当此代码修改识别出可能需要手动干预但我们无法确定确切修复方法的位置时,它会在代码中添加注释或类型转换以告知用户需要手动更新。这些注释以 @next/codemod 为前缀,类型转换以
UnsafeUnwrapped
为前缀。您的构建将出错,直到明确删除这些注释。阅读更多。
将 NextRequest
的 geo
和 ip
属性替换为 @vercel/functions
next-request-geo-ip
终端npx @next/codemod@latest next-request-geo-ip .
next-request-geo-ip
npx @next/codemod@latest next-request-geo-ip .