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>;
}