Next 13如何获取app目录下的page slug？

Question

在 Next.js 12 中，我们通过在getStaticProps中执行以下操作来获取当前页面的 slug。 Next.js 13 中如何做到这一点？

✅Next.js 12

export async function getStaticProps(context) {
  const slug = context.params.slug
}

❌Next.js 13 - 在 Next.js13 中，使用上面的代码会报错

Error: Cannot read properties of undefined (reading 'params')

export async function fetchData(context) {
    ❌const slug = context.params.slug
}

Answer 1

在app目录中，位于page.js中的组件会传递一个如下所示的参数：

{ params: {}, searchParams: {} }

如果你有slug ，它会在params中。 但它是您的页面组件，应该将它传递给您的数据获取 function，例如：

async function fetchData(context) {
    const slug = context.params.slug
}

export default async function Page(context) {
  const data = await fetchData(context)
  return <h1>My Page</h1>;
}