Currently, I am working on developing a basic landing page using technologies such as Next.js, TypeScript, and Firebase. To populate the products on the page, I retrieve data from a Firestore database and store it in my state using React context.
One challenge I encountered is when attempting to implement Incremental Static Regeneration (ISR) to access a specific product, for instance: "localhost:3000/product/[slug].tsx", I encountered an error which you can see in the following screenshot:
https://i.sstatic.net/Jsn69.png
Here is the code snippet:
interface Props {
slug: Products
}
const ProductPage: NextPage<Props> = ({ slug }) => {
const { products } = useContext(DbContext)
const product = products.filter(product => product.slug === `${slug}`)
return (
<MainLayout title={``} pageDescription={''} imageFullUrl={''}>
// product tsx
</MainLayout>
)
}
export const getStaticPaths: GetStaticPaths = async (ctx) => {
const { products } = useContext(DbContext)
const slugs = products.map(product => product.slug)
return {
paths: slugs.map((slug) => ({
params: { slug }
})),
fallback: "blocking"
}
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const { slug } = params as { slug: string }
if (!slug) {
return {
redirect: {
destination: "/",
permanent: false
}
}
}
return {
props: {
slug
},
revalidate:86400
}
}
export default ProductPage
Thank you very much for your time!