如何在不知道 NextJS 上的静态路径的情况下生成动态页面？

Question

我想将我的用户引导到一个页面，他们可以在该页面上根据他们的公民身份号码获得折扣。我将使用他们的身份证号码来确定他们获得的折扣金额。我可以使用他们的 id 来确定位置、年龄、性别等。

他们可以路由到 mywebsite.com/megadiscount 并在框中填写他们的身份证号码，然后找出他们可以获得多少折扣。但是现在的问题是，我也希望他们能够得到一个link到mywebsite.com/megadiscount/[id number]，看看有多少折扣他们可以得到。

所以使用 NextJS 我知道我可以创建 megadiscount/index.js 和 megadiscount/[id].js 来从 url.

中捕获 id

问题是在 megadiscount/[id].js 我必须用 getStaticPaths 指定我将生成的 ID 页面，但问题是我不知道这些 ID 是什么。

我的 megadiscount/[id].js 文件如下所示

const Page = ({discount}) => {
  return (
    <>
      <h1>You get a discount of : {discount}%</h1>
    </>
  )
}


export async function getStaticPaths() {

  return {
    paths: [], // I don't know what these will be
    fallback: false,
  };
}

export async function getStaticProps(context) {
  const { slug = "" } = context.params;
  const discount = fetchDiscountFromServer(slug)
  return {
    props: {
      discount
    },
  };
}

export default Page;

Answer 1

export default function Page({ discount }) {
  return (
    <>
      <h1>You get a discount of : {discount}%</h1>
    </>
  );
}

export async function getStaticProps({ params: { id } }) {
  //Featch your discount based on id
  const discount = await fetchDiscountFromServer(id);
  return {
    props: { discount },
  };
}
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: "blocking",
  };
}

NextJS 为这种情况提供回退：“阻塞”。查看 docs

但我认为在这种情况下你应该考虑 SSR。这将为每个用户生成一个静态页面，这很好，但是如果您经常更改折扣，您必须设置一个较低的 revalidate:1 值，但这仍然不是实时的。

如何在不知道 NextJS 上的静态路径的情况下生成动态页面？

how to generate dynamic pages without knowing the static paths on NextJS?

javascript

next.js

dynamic-routing