All language subtitles for 013 Introducing _getStaticPaths_ For Dynamic Pages_Downloadly.ir_en

So what's up with this error.

Now good thing is this error actually tells us the solution

though of course, we don't really understand

why we need that solution.

Well, keep in mind that currently

Next.js is pre-generating all the pages.

And I mentioned that it would pre-generate pages by default.

It turns out this is not the case

if you have a dynamic page,

so where the name of the component has such square brackets.

If you have a dynamic segment leading to that page,

if you have that,

the default behavior is not to pre-generate the page.

And why is that not the default,

because keep in mind that technically

for a this page, we won't just have one page,

but multiple pages for different IDs,

we have technically different pages

which have kind of the same frame

and the same general HTML content,

but different data.

This page can be loaded /P1/P2/P1000.

So Next.js doesn't know in advance,

how many pages it needs to pre-generate

for this dynamic page.

It doesn't know which values for PID

will eventually be supported.

And because it doesn't know that

dynamic pages like this are not pre-generated by default

instead they are always generated

just in time on the server,

Which is why it worked before.

But it's now not working anymore

because we added get static props.

And as I mentioned,

when you add this function to a page component file,

then you tell Next.js that you want to pre-render

this page in advance.

For index.js that didn't make a difference

there it was default anyways,

but for this dynamic page it does make a difference

because they it was not the default

for the reasons mentioned

Next.js has no chance of knowing how many pages you need

and which concrete values of this dynamic segment you need.

That's why for such dynamic routes,

we need to give Next.js more information.

We can also tell Next.js which paths.

So which instances off a dynamic page

should be pre-generated.

Because here we don't just need data

we also need to let Next.js know which ID values,

which dynamic segment values will be available

and for which values a page should be pre-generated.

So that multiple instances of that page blueprint

can be pre-generated by Next.js.

And we do inform Next.js about this with another function

we can add on the page.

So another function we can add in this page file,

and that's the getStaticPaths function,

which also is a async.

So where you can also use the await keyword

and just ask get static props.

That's a function which you can add

to your page component files and only there.

So not in any other component files

and you need to export it to make Next.js aware of it.

And now let's explore how this function works

and how we use it.