use getStaticPaths and getStaticProps with context? NEXT js

Question

i'm making a simple landing page with next js, typescript and firebase. i take the products from the firestore db and load them into my state (React context). The problem is that i want to use ISR to access to a product for example: "localhost:3000/product/[slug].tsx" get this error

code:

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

Thenks so much!

Answer 1

You can not use hooks inside getStaticPath, getStaticProps or getServersideProps, etc.

Checkout this official example for how to use firebase with Next.js - https://github.com/vercel/next.js/tree/canary/examples/with-firebase