nextjs新特性

近期更新了个 @nextcodemod/cli

里面其中一个

来自官网

    npx @next/codemod@canary upgrade latest

这是在官网这样写的

此工具可帮助您将代码库升级到最新的稳定版本或预发布版本。CLI将更新您的依赖关系，显示可用的codemods，并指导您应用它们。

金丝雀标签使用最新版本的codemod，而最新版本指定Next.js版本。即使您要升级到最新的Next.js版本，我们也建议您使用codemod的金丝雀版本，因为我们计划根据您的反馈继续对该工具进行改进。

了解更多关于Next.js codemod CLI的信息。

Codemods是以编程方式在代码库上运行的转换。这允许以编程方式应用大量更改，而无需手动遍历每个文件。

当API被更新或弃用时，Next.js提供了Codemod转换，以帮助升级Next.js代码库。

npx @next/codemod@latest next-async-request-api .

此codemod将转换现在异步的动态API（cookies（）、headers（）和draftMode（）），以便在适用的情况下使用React.use（）进行适当的等待或包装。当无法自动迁移时，codemod将添加一个类型转换（如果是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')
}