All language subtitles for 025 Preparing Paths with _getStaticPaths_ & Working With Fallback Pages_en

getStaticPaths

is another function

NextJS understands,

just like getStaticProps

and getServerSideProps.

And getStaticPaths is a function you need to export

in a page component file.

If it's a dynamic page

like we have it here and you're using getStaticProps,

not if you're using getServerSideProps

and not if you're using neever get static

nor getServerSideProps

but it is needed if you do use getStaticProps.

So in that case, you need to export another function here

in this page component file.

And that's the getStaticPaths function.

And this can also be a async function

so that you can use a single weight in there.

Now what's the deal with getStaticPaths though.

To understand it, let's again think about the fact

that with getStaticProps

a page is pre-generated during the build process.

Now, what does this mean?

This means that of course, NextJS needs to pre-generate

all versions of this dynamic page in advance

for all the supported IDs.

Because since this is dynamic, NextJS needs to know

for which ID values it should pre-generate the page.

Because how would it pre-generate this page otherwise?

We get the ID from the URL here.

Great, but keep in mind that this is not pre-generated

when a user visits this page with a specific value

in the URL, but during the build process.

So here we need to pre-generated for all the URLs,

for all the meetup ID values users might be entering

at runtime.

And if they enter an ID for which we didn't pre-generate

the page, they will see a 404 error.

But because that is how it works,

we need to add getStaticPaths

which has the job of returning an object

where we describe all the dynamic segment values.

So all the meetup IDs in this case,

for which this page should be pre-generated.

Now for this, this object needs to have a paths key,

which is an array.

And in that array, you must have multiple objects

one object per version of this dynamic page.

Where this object has a parans key.

That's a must have, which then itself again is an object

with all the key value pairs

that might lead to your dynamic page.

So if you have multiple dynamic segments,

then you would have multiple keys in this nested object.

Here we only have meetup ID as a single dynamic segment.

And hence here in this parans object,

we would add a meetup ID key

and then enter the concrete value for meetup ID

for which this page should be pre-generated.

And if we have multiple possible values.

Like in this case where I have, M1 and M2

we would return a paths array with two objects inside of it,

where the other one uses M2 as a meetup ID.

Now, in reality, you would of course not hard-code this

as a developer,

but you would also fetch your supported IDs from a database

or from an API and generate this array dynamically.

And we are also going to do that later,

but for the moment let's hard-code it.

With that, if you save that file with getStaticPaths added

with this code and with getStaticProps

still being in there, with that if you now reload,

we don't get this error anymore.

Instead we get this error regarding the fallback key

instead of getStaticPaths.

And that's another piece of configuration,

which you need to add in this returned object

next to your paths key,

the fallback key.

This key tells NextJS whether your paths array

contains all supported parameter values

or just some of them.

If you set fall back to false,

you say that your paths

contains all supported meetup ID values.

That means that if the user enters anything

that's not supported here, for example, M3

he or she would see a 404 error.

If you set fall back to true on the other hand,

NextJS would try to generate a page

for this meetup ID dynamically on the server

for the incoming request.

Fall back is a nice feature

because it allows you to pre-generate some of your pages

for specific meetup ID values.

For example the pages which are visited most frequently

and then pre-generate the missing ones dynamically

when requests for them are coming in.

Here however, I'll set fallback to false

to indicate that I defined all supported paths here.

Now, if you wanna learn more about fallback and so on,

I do cover that in greater detail in my full course.

But the general concept

is that we can simply define some paths

instead of all paths.

If we, for example, have hundreds of pages

and we don't wanna pre-generate all of them,

but maybe just our most popular pages.

And therefore with fallback added now,

if we save this again and reload,

now we successfully load the page for this first meetup.

If I go to M2, that also works.

But if I enter M3, I get the default 404 page here

because I had fallback set to false

and M3 is not one of the supported parameters here.

That's how this works.

And getStaticPaths

therefore is another important function,

which you need in dynamic pages to tell NextJS

for which dynamic parameter values

this page should be pre-generated.

And then again, getStaticProps executes for every page.

So for every meetup ID value allows you to fetch data

for that meetup and allows you to return props

for that meetup.

And as a side note here, where I locked the meetup ID

we do see that here in this terminal.

We don't see it in the browser,

developer tools,

here the console is empty

because I mentioned that this is called the code

instead of getStaticProps, which runs during build time.

And when running in the development server

it does run for every incoming request

but only on the developer server side.

So we only see it in the terminal of this developer server

then, and not in the browser.

That's how it getStaticProps works for dynamic pages

and that's how it getStaticPaths works

and why it is required.