Search code examples
javascriptnext.jsdynamic-routing

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


I want to route my users to a page where they can get discounts based on their citizenship id numbers. I will use their id number to determine the amount of discount they get. I can use their id to determine Location, Age, Gender etc.

They can route to mywebsite.com/megadiscount and fill in their id number in a box and find out how much discount they can get. But now the issue is that I also want them to be able to get a link to mywebsite.com/megadiscount/[id number] to find out how much discount they can get.

So with NextJS I know I can create megadiscount/index.js and megadiscount/[id].js to capture the id from the url.

The problem is that on megadiscount/[id].js I have to specify with a getStaticPaths the id pages I will be generating but the problem is that I have no knowledge what these id's will be.

My megadiscount/[id].js file looks like this

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;

Solution

  • 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 offers fallback:"blocking" for cases like this. Check out the docs

    But You should think about SSR in this case, In my opinion. This will generate a static page for every user which is fine but If you frequently change your discount You have to set a low revalidate:1 value but still that wont be realtime.