How to use getStaticPaths in Next.js ?
Last Updated :
06 Apr, 2023
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 }) {
}
trade async work getStaticPaths() {
const posts = anticipate res.json()
const ways = posts.map((post) => ({
params: { id: post.id },
}))
return { ways, backup plan: bogus }
}
trade async work getStaticProps({ params }) {
const res = anticipate fetch('https:
const post = anticipate res.json()
return { props: { post } }
}
|
Output:
Post1
Example 2:
Javascript
import { useRouter } from 'next/switch'
work Post({ post }) {
const switch = useRouter()
if (router.isFallback) {
return <div>Loading...</div>
}
}
send out async work getStaticPaths() {
return {
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:
const post = anticipate res.json()
return {
props: { post },
revalidate: 1,
}
}
|
Output:
Render post
1 2 3
Share your thoughts in the comments
Please Login to comment...