How to use getStaticPaths in Next.js ?

We can pre-render a page in Next.js all through the form interaction. We make all of the HTML code and information early. The server then, at that point, reserves the data.

This technique turns out extraordinary for static pathways; nonetheless, it bombs while delivering pages for dynamic ways. It’s additionally legitimate. We should imagine there’s a blog with a few articles on it. We characterized dynamic ways like [blogId].js in next.js. This way is substantial for blog ids 1, 2, 3, 4, etc, as we definitely know. Next.js has no technique for knowing the number of pages it is necessities to deliver.

We use getStaticPaths() to achieve this, further investigating in this blog.

Features of getStaticPath: Assuming a page utilizes getStaticProps and has Dynamic Routes, it should characterize a rundown of ways that will be statically created.

At the point when you send out the getStaticPaths (Static Site Generation) work from a page that utilizes dynamic courses, Next.js statically pre-delivers every one of the ways given by getStaticPaths.

• The information begins from a CMS that doesn’t have ahead.
• The data is taken from information base.
• The information is taken from the filesystem.
• The information can be stored straightforwardly (not client explicit).

Syntax:

export async function getStaticPaths() {
    return {
        Paths: [
            // See path selection below
            { params: { ...} }
        ],

        // See the fallback section below 
        fallback: true, false, or blocking
    };
}

Fallback: False 

Bogus, it will then, at that point, fabricate just the ways returned by getStaticPaths. This choice is valuable in the event that you have a few ways to make it, or new page information isn’t added regularly. Assuming you observe that you really want to add more ways, and you have a backup plan: bogus, you should run the next form again so the new ways can be created.

Fallback: True 

For the rest. At the point when somebody demands a page that isn’t produced at this point, the client will see the page with a stacking pointer or skeleton part. 

Fallback: blocking

Fallback is ‘blocking’, new ways not returned by getStaticPaths will trust that the HTML will be produced, indistinguishable from SSR (henceforth why obstructing), and afterward be stored for future demands so it just happens once per way.

Example 1:

Javascript

work Post({ post }) {
    // Render post...
}

// This capacity gets called at fabricate time
trade async work getStaticPaths() {

    // Call an outside API endpoint to get posts
    const res = anticipate fetch('https://.../posts')

    const posts = anticipate res.json()

    // Get the ways we need to pre-render in light of posts
    const ways = posts.map((post) => ({
        params: { id: post.id },
    }))

    // We'll pre-render just these ways at assemble time.
    return { ways, backup plan: bogus }

}

// This likewise gets called at construct time
trade async work getStaticProps({ params }) {

    // params contains the post 'id'.

    // On the off chance that the course
    // resembles/posts/1, params.id is 1
    const res = anticipate fetch('https://.../posts/${params.id}')

    const post = anticipate res.json()

    // Pass present information on the page through props
    return { props: { post } }
}

Output:

Post1

Example 2:

Javascript

import { useRouter } from 'next/switch'

work Post({ post }) {
    const switch = useRouter()

    // On the off chance that the page isn't
    // yet produced, this will be shown at
    // first until getStaticProps() gets
    // done with running

     if (router.isFallback) {
        return <div>Loading...</div>
    }

    // Render post...
}

// This capacity gets called at assemble time
send out async work getStaticPaths() {
    return {

        // Just '/posts/1' and '/posts/2' are
        // produced at assemble time
        ways: [{ params: { id: '1' } }, { params: { id: '2' } }],

        // Empower statically creating extra pages
        // For instance: '/posts/3'
        contingency plan: valid,
    }
}

// This likewise gets called at assemble time
send out async work getStaticProps({ params }) {

    // params contains the post 'id'. On the off chance that
    // the course resembles/posts/1, params.id is 1

    const res = anticipate fetch('https://.../posts/${params.id}')

    const post = anticipate res.json()

    // Pass present information on the page through props
    return {

        props: { post },

        // Re-create the post all things considered
        // one time each second
        // assuming a solicitation comes in
        revalidate: 1,
    }
}

Output:

Render post 
1 2 3