I am looking to create a unique user experience by offering discounts on my website based on the users' citizenship ID numbers. By using their ID number, I can customize the discount amount according to factors such as location, age, and gender.
Users can navigate to mywebsite.com/megadiscount where they can enter their ID number in a form to discover their personalized discount. Additionally, I want them to have the option to visit mywebsite.com/megadiscount/[id number] for the same information.
In order to achieve this with NextJS, I understand that I need to create both megadiscount/index.js and megadiscount/[id].js to handle the ID parameter in the URL.
The challenge arises when dealing with the getStaticPaths function in the megadiscount/[id].js file, as I am unsure of all the possible ID values that will be generated.
This is how my megadiscount/[id].js file is structured:
const Page = ({discount}) => {
return (
<>
<h1>You are eligible for a {discount}% discount!</h1>
</>
)
}
export async function getStaticPaths() {
return {
paths: [], // Unable to anticipate all potential ID values here
fallback: false,
};
}
export async function getStaticProps(context) {
const { slug = "" } = context.params;
const discount = fetchDiscountFromServer(slug)
return {
props: {
discount
},
};
}
export default Page;