Set Up Dynamic Paths with getStaticPaths

[00:00:00]
>> Okay, now we're gonna pretty much do the same thing for the dynamic page, which is the slug. This one's gonna be a little different, because if you have a dynamic page, and actually is you have to define a get static path. So let's do that first, so we're going to say export function get static paths.

[00:00:21]
And the reason you have to have the get static paths is, because if next is trying to generate this page, and it has a parameter in it, how does it know what page to generate? You have to give it the path so it knows what page to generate ahead of time.

[00:00:34]
Otherwise, it wouldn't know, that's because reasons static numbers and started as a server interface, we would have a static class, because the parameters come in at runtime. And we have access to them inside the server side props, but because this is a static build, we have to do that bill time.

[00:00:50]
So that means we have to go fetch whatever the, whatever data is gonna generate these pathological fetch it. Now we'll get it, with some, and that's partially true, because I'm gonna show you a performance benefit, where we don't have to get all of it. But if whatever you want to generate has to be returned here, basically.

[00:01:11]
So let's do that, so what we're gonna do is very similar, to what we did in the last one, so we're going to import the. File system from fs and import path from path. I don't know why I can't really type that good right now, okay, so we've got that.

[00:01:33]
And then we're gonna go down here. And we just wanna get all the names, or technically the slugs, because that's what's gonna be here, the slugs represented in this file name. Are associated with the slugs and the front matter here, so that's really all we wanna get. We just wanna return these slugs, we wanna return an array of these.

[00:01:56]
This is gonna tell next.js, these are the files we wanna generate right now, and we're only gonna do the file system ones. We're not gonna do, the blog post ones, I'm sorry, the CMS ones. But don't worry, those are still gonna be available to be used with a special feature next.

[00:02:09]
Yes, so let's just do the file system one. So what we'll do is look at that post path, just like we did before, in fact part is going to copy it, because it's so much faster. So we'll do that, got our post paths here, we're gonna pretty much do the exact same thing, that we did before, right?

[00:02:29]
So we're just gonna get the, like the slugs basically, so we'll say file names, dot map, get the name, and we'll get the file, or let's get the full path. Already have a look at the file, which is basically Fs dot read file sync. And that's gonna be on the file path, which is path dot join the post path, and the name.

[00:03:05]
And then, what I wanna do, is spell that right first, and then, yeah, so I was gonna pass in the file path here. And then UTF-8 for the encoding. Like that, so we'll get those, and then just like, we did before we're gonna import matter. So let's copy from appears so much easier, get that matter like that.

[00:03:30]
Paste that cool, so we got matter and then, what we're gonna do is go down to slugs, and we're gonna do the same that we did before. So data = matter, pass in the file, return data. So now, we got the slugs here, the format for returning the paths is pretty much an object that says paths.

[00:03:52]
And then we have the slugs here, so we're gonna map over these slugs. And if for each slug, what we're gonna do is we're gonna return an object, that has a property on it called params. Because that's what next JS wants us to do, and then for the params, this is where we actually use whatever is inside of our URL.

[00:04:11]
So in this case, just a slug, so slug like that, and then what we wanna do is we wanna get this right here. So we'll say s.slug, like that, so this will give us back all of our paths. So just to recap, basically all we did was just what we did last time we read the file system.

[00:04:36]
For each post in that file, we converted the formatter to JSON. We mapped over those, and we just return an array of objects, that have params, with a slug on them, because that's what's the URL. That's what the file path has in it slug. So the next part that we have to do is we need to actually fetch the individual slug.

[00:04:59]
That matches the params that came in, but before we do it, we have to put something here for fall back. Otherwise, next year is gonna basically tell us no. So what is fall back?, basically fall back, what it does is, when you, for instance, I put fallback: false.

[00:05:19]
Let's talk about that, so let's say fallback: false. Basically what this means is if you try to go to a page at /blog /some slug that doesn't exist, you'll get a fallback: false, just like any other website, you'll get a fallback: false. That's what fallback false does, fallback true, what this does is like, okay, we're not gonna give you a four.

[00:05:40]
So instead what we're gonna do, is we're just gonna pass in whatever slug you passed gave us, we're gonna pass that to get static props. And if get static props get Stats Log and returns a post, that would be cool. We'll render that statically and we'll cache it for next time.

[00:05:56]
So it's basically like on demand, static generation for things that you didn't build ahead of time already. Just think about that, so let's say you had a million blog posts, okay? How long it would take to generate and they all came from a CMS, I don't know. That would take a very, very long time to generate at build time.

[00:06:15]
So instead, you say, well, I'm only gonna generate I'll only do API call to my CMS and only get the first 100 blog posts. I'm only gonna get the first 100 blog posts out, and that's what I'm gonna return here return a path. So the first 100 blog posts for the next, 900,000 plus, those are only gonna get rendered on demand.

[00:06:32]
So when someone goes to that URL, then that first time because fallback is true, it's going to render that page and cache it for next time. It'll generate it at that time, that's what fallback, true does, so it's non blocking. So because of that, we have to do some stuff inside of the slug here.

[00:06:57]
And you can see already have the code we have to do something like this router dot fallback. Because it's non blocking, we need a way to know inside of this JSX, if we're currently in a fallback state. So basically next is will tell you, by the way of the router that hey, this current page is currently in a fallback state, as in someone requested a page, that wasn't statically rendered.

[00:07:22]
So maybe you should show them like a loading spinner, so that's what this is. So if I can if router.is fallback is true, I know that someone requested a page that I didn't statically render that I can show a loading spinner. If you're not a fan of the loading spinner, and that kind of grosses you out.

[00:07:37]
You can put fallback blocking, which is basically the same thing as fallback true except it doesn't, it is not gonna, it's not even gonna go to this page. So you only have to look for it, you don't have to show a loading spinner. It'll block the execution of this page being rendered completely, until that page was that data was rendered out.

[00:07:58]
From the get static props, so it won't even, it won't even show you that. So basically someone will try to navigate to the page, that doesn't exist, instead of navigating there, and showing him a loading screen, and then eventually showing him the content. It just won't even navigate there, it'll just be waiting and waiting just like it was basically the same behavior is get server side props.

[00:08:18]
It'll just be waiting until that is resolved, until that page is generated statically, and in cash, and then it'll route there. So depending on what behavior you want you can pick which one you want. So we're going to fall back false, and that's basically how we're gonna handle content from the blog.

[00:08:36]
I'm sorry from the CMS, we're just not gonna return their path. So when you try to go, and get them dynamically, that's when we'll rid of them. So we'll take care of that here, with the export function getStaticdrops, okay.