slug 后生成新页面答案

【问题标题】：Generate new page after slugslug 后生成新页面
【发布时间】：2020-10-29 15:44:23
【问题描述】：

我正在构建一个 NextJS 应用程序，目前我正在使用 getStaticPaths 和 getStaticProps 来构建静态页面，为它们执行必要的请求。

所以我想构建这个 url 之后的所有页面：challenge/[slug]/ 并且对于与 id 对应的每个 slug，我希望有一个这样的应用程序页面：challenge/[slug]/applications 来归档这个我构建了一个文件 [.. .slug] 里面/pages/challenge

在该文件中，我有以下代码来处理静态生成：

export async function getStaticPaths() {
  const response: any = await getPrograms()

  const paths = response.results.map(result => {
    return { params: { slug: [result.id.toString()] } }
  })

  return { paths, fallback: true }
}

export async function getStaticProps({ params }) {
  const res = await getProgram(params.slug[0])
  const stages = await getStages(params.slug[0])

  return { props: { program: res, stages: stages }, revalidate: 1 }
}

此解决方案适用于 /challenge/[slug]，但 /challenge/[slug]/applications 收到 404，如何呈现特定的应用程序页面为了蛞蝓？

我尝试向 slug 数组添加第二个位置，但如果我这样做了，我只能渲染 /challenge/[slug]/applications 而不是 /challenge/[slug]

有什么建议吗？

谢谢！

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

首先，您需要创建一个名为[slug] 的FOLDER。然后，创建一个名为 applications.js 的 FILE。最后，将该代码复制并粘贴到此页面中。

__ challenge
  |__ [slug]
     |__ applications

在此页面中，您可以获取或设置slug 作为您想要的参数。

【讨论】：