nextjs

Codemods

其中一个

当我们检测到对页面/路由条目（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}`,
  }
}

很高兴知道：当这个codemod识别出一个可能需要手动干预的位置，但我们无法确定确切的修复方法时，它会在代码中添加注释或类型转换，通知用户需要手动更新。这些注释的前缀是@next/codemod，而类型转换的前缀是UnsafeUnwrapped。在明确删除这些注释之前，构建将出错