Question

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

他们可以转到 mywebsite.com/megadiscount 并在框中填写他们的 ID 号，然后找出他们可以获得多少折扣。但现在的问题是，我还希望他们能够获得 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 上的静态路径的情况下生成动态页面？

1 个答案: