Introduction to Next.js Building Static Pages with getStaticPaths

Transcript from the "Building Static Pages with getStaticPaths" Lesson

[00:00:00]
>> Now, if we do have a dynamic URL. And which we do need the value of the params, in order to fetch the content for a page inside of get static props. Then we're gonna use another function called get static paths. Get static paths is very much like a static props, but it's responsibility is to fetch all the generated paths for all your unique URLs.

[00:00:29] For instance, let's say we had a blog or a documentation website, which is really good. So we have a documentation website. And but we have a, I don't know, a catch all URL in here, right? So let's say we had a, you did something like this, where it was like docks.

[00:00:48] And inside the docks. It was like, some catch all you're like params, right? And we need to get, we need a way to tell. We want to generate all the documentation pages ahead of time, we wanted to be a static site. So that means, we need to generate them at build time.

[00:01:11] So how do we know where they are? So eventually, we got to pull this information down from somewhere, where there's an API. Where is a JSON file you got saved somewhere, whether it's a directory inside your app that says. Here's all my markdown files and everything's markdown, right?

[00:01:25] No matter where it is, you need to figure out where it is. You need to create some paths. And that's what gets static passes. It's an ability to get the paths for static pages, that need to be generated. That's why it's called get static path. What are all the paths that you need for this dynamic URL, to be statically generated?

[00:01:43] And it's really cool. So basically, the way it works is just like get static props. It's an in sync function. You can do literally, whatever you want in here. But end of the day, you need to return an object with paths on it, okay? And that object is gonna look like this, I'm sorry, in an object with paths on it, and the paths is gonna be an array.

[00:02:02] And the race is gonna have for every single page that you wanna render, just send back the params. So in this case, I have a URL called slug, right? So I'm trying to go to slug here like that. So this will be my parameter. Then I need to send back params, with this login the value on it like that.

[00:02:23] And this is going to tell next js, hey, you wanna create two pages, one with this slug, one with this look. And they both resolve to this URL. That's what an index is we'll create those two pages. So you can think of it as like in Gatsby, where you would source markdown files to create pages.

[00:02:46] Or in Gatsby, they also source the pages directory to create pages. It's pretty much the same thing, except for you're hinting at a tool that says, hey, here are the pages that you won't be able to read. Because, they're not associated with pages, they're somewhere else. They're on my database, there and this other folder, they're in this JSON file.

[00:03:06] So here they are, and here's how you associate them. So that's what this does. So this will create those pages. And then now, that once you have the props here, what you can do, is you can now use that params object. You can use that params object now, which is gonna allow you to get the slug in this case, and boom, there you go.

[00:03:28] You can fetch your data or your slug. Don't worry, we're gonna be doing all of this, as you might walk you guys through it. But yeah, that's how good static passwords would get set of props. In fact, if you use get static paths, you have these static props.

[00:03:43] Why else we use a static path? So you have to use them both together. But you only have these static props. If it's not a dynamic URL, if it's not a dynamic URL, you don't need good static paths. If it is a dynamic URL, then yeah, you should get static pass to get the actual pages.

[00:04:00] You need to read it for this. Now, not every dynamic URL is gonna be able to be rendered ahead of time. Like for instance, if I'm like this is slash user ID. I'm not gonna go render a page for all of my users ahead of time, that's ridiculous.

[00:04:16] I mean, I guess you could, I don't know why you would, and especially about our data is dynamic. So you wouldn't do that here. We'll talk about what you would do instead, so this is not the case. So this is for static pages, pages that are static, not dynamic pages.

[00:04:29] Dynamic pages, you can continue to do client side, like you've been doing. Or you can do this next thing, which I'm about to show you. And I'll talk a little bit more about static paths. One big tip here that they added recently, was the ability to use fallback truth.

[00:04:41] Which I think is really cool. So if you add fallback true to this object's, Inside to get static paths. This is really cool actually, what it does is it basically allows you to. let's say you have a, I don't know, you're trying to render a blog that has 20,000 blog pages statically, but it just takes too long to build.

[00:04:59] So you're only gonna render 100, the hundred most recent ones. And then for the rest, you can put fall back true and then what it'll do is at runtime when someone navigates to it. Then it'll render it and pre-render it there. So it'll keep her rendering pages as people navigate to them, instead of doing them ahead of time.

[00:05:18] Which I think is really, really cool. And then, you can tie it into the fallback logic, inside your page component. There's like a prop that gets passed in that says, hey, am I currently on the fallback right now? Yeah, you just show like a loading screen or something like that, while it renders.

[00:05:33] So it's really cool, but really advanced, which is why I'm not gonna talk about it. But yeah, if you need something like that, look into that. But yeah, you literally only need this if you're building a lot of pages, which most people aren't right now, so yeah.