Leverage getStaticPaths and getStaticProps along with context in NEXT.js

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!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When ngIf evaluates to false, Angular4's ng-content is constructed

I'm facing an issue with the new ng-content transclusion feature. To illustrate, let's consider a scenario where I have a component called my-component that performs some intensive operations in its ngOnInit() function (for now, just a console.l ...

Growing the number of items in the shopping cart

I am facing challenges in adjusting the quantities of products in my cart after adding them. Let me explain the process step by step. 1- I list out the products. 2- I create a function to abbreviate the quantities (miktarKisalt) 3- If the products can b ...

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

I am currently analyzing a JSON file that contains deeply nested JavaScript Objects. My goal is to rearrange the data so that objects containing a specific field value are placed at the top of the list

Currently, I am parsing a JSON file which contains a map of JavaScript objects. For instance: { offers : { "1":{"id":"1", "category":"a", "offerType":"LS"}, "2":{"id":"2", "category":"a", "offerType":"EX"}, ...

Loading a large quantity of items into state in React Context using Typescript

I am currently working on a React context where I need to bulk load items into the state rather than loading one item at a time using a reducer. The issue lies in the Provider initialization section of the code, specifically in handling the api fetch call ...

When combining Glide and RecyclerView, I noticed that the scrolling behavior is not exactly as I had hoped

I am utilizing RecyclerView ('androidx.recyclerview:recyclerview:1.1.0') in combination with Glide('com.github.bumptech.glide:glide:4.10.0'). My objective was to create an image list using RecyclerView, where each view holder loads an ...

Guide on transforming this Formik snippet into Typescript code without errors

https://i.sstatic.net/DcEvx.png Can someone please guide me on passing the values: onSubmit={(input, { setSubmitting, resetForm }) into a function within formik code. Also looking for ways to resolve this warning: https://i.sstatic.net/isJxi.png Your ...

Tips for fixing the "Prop `id` mismatch error between server and client in the console for react tabs."

I've been experimenting with tabs in Next.js, but every time I implement them I encounter a console warning like this: Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0". Although it doesn't seem to impact ...

Using the data retrieved from getStaticProps to loop through an object and render it in the component

I'm encountering an issue with displaying the results of a database fetch that occurred within the getStaticProps function. When I try to map the object in my component template, I receive certain errors. My goal is to showcase all the data retrieved ...

Create a function that takes in an array of strings and outputs a record containing a unique key for each string in the array

Looking to create a function that takes an array of strings as input and returns an object with a key for each string in the input array? Here is an example of how this can be implemented: const getMyObject = (...keys: string[]) => keys.reduce((object, ...

Tips on making a forced call to `super.ngOnDestroy`

I am utilizing an abstract class to prevent redundant code for unsubscribing observables. Here is what it looks like: export abstract class SubscriptionManagmentDirective implements OnDestroy { componetDestroyed = new Subject<void>() constructor ...

How can I utilize React hook to choose multiple items?

I am currently working on developing a next js application. As part of this project, I have been tasked with creating a custom dropdown select menu using react hooks, specifically useState. The code I have written for this is as follows. Data- export defa ...

Encountering a type error when attempting to filter TypeORM 0.3.5 by an enum column that is

I have the following configuration: export enum TestEnum { A = 'A', B = 'B' C = 'C' } @Entity() export class User { @PrimaryGeneratedColumn() id: number @Column({enum: TestEnum}) test: TestEnum } ...

Guide for nesting components in Storybook using Angular

I am currently working with a folder structure that contains both my button and card components: https://i.sstatic.net/fNa0t.png To organize my components, I created a components.module.ts file and placed all my components in it. Then, I imported it into ...

"Utilizing Typescript's generic type declaration feature to pass type

Imagine this scenario with a specific type and a generic: type Data = { item: number }; type Generic<T> = { obj: T; }; Now, let's create an instance of this generic: const test: Generic<Data> = { obj: { item: 0 } }; When accessing tes ...

Facing an issue with the React-Three-Fiber Canvas component triggering a 'Module parse failed: setter should have exactly one param' error in my Next.js application. Any suggestions for resolving this issue

Having issues with the Canvas component in react-three-fiber not functioning correctly in my next app. I am new to react-three-fiber and Next.js, and when I try to use the Canvas component, I encounter the following error: ./node_modules/three/build/three ...

Tips for modifying TypeScript class types based on a parent class object property?

As part of a project, I have created two classes: ParentClass childrenClass which extends the ParentClass class Displayed below is the code for my ParentClass: interface ConfSetup<T extends boolean> { enabled: T; permissions: bigint[]; locati ...

Why is it necessary to include "DOM" in the "lib" array of my tsconfig just to make the Auth0 node package work for my backend service?

I have a nodejs backend service, and I want to utilize the auth0 management API for tasks like manual user creation. However, this library fails to function unless I include "DOM" in my tsconfig.json file. Otherwise, I encounter the following e ...

Don't send me to the login page when I'm dealing with the clerk

Here is my ConvexClientProvider file: "use client"; import { ReactNode } from "react"; import { ConvexProviderWithClerk } from "convex/react-clerk"; import { ClerkProvider, useAuth } from "@clerk/nextjs"; import { Co ...

Issue: It is not allowed for segment names to begin with incorrect periods ('..nextauth'). - NextJS

Currently working on a NextJS app with Typescript, and I'm stuck on this error message: Error: Segment names may not start with erroneous periods ('..nextauth'). Here are the logs from running npm run dev: > <a href="/cdn-cgi/l/email ...