Introduction to Next.js 13+, v2 Static Params

Transcript from the "Static Params" Lesson

[00:00:00]
>> So let's talk about static params. So, earlier in the course we talked about, if we go back to our app folder in this repo, we have this dynamic segment here where it's a slug. And I said, we could figure out how to get access to that so we can do some stuff with it.

[00:00:18] Well, that's what we're gonna learn about. We're gonna learn about how to get access to the slug so we can actually do something meaningful with it, like hit a CMS and get a blog post or something like that. And the way we wanna do that is something called generate static params.

[00:00:31] So all we have to do in this case for getting like a blog post is we just have to export another function inside of our page. Called generate static params that basically just returns an array of parameters of all the possible parameters that this page is going to have so it's you couldn't do this for like a static page.

[00:00:58] Or, I'm sorry, you couldn't do this for a dynamic route page for like users, because then you would would query your database and get all millions of users and iterate over them and return this. So it's not for that. It's meant for like, static dynamic pages. Like there's probably a finite set of blog entries that you have.

[00:01:15] So you can do that. And that makes sense. But this this wouldn't make sense for like, you know, slash user ID Or something like that, that would, that would be insane. So this is like, you know this, these are for blog posts for static pages. And that's why it's called generate static params, not dynamic params because these params are actually static.

[00:01:34] So in this example, we're just getting a question.
>> Just a quick question like, would you have like a rule of thumb number tough on like is a hundred too many? Is a thousand too many?
>> That's a good question. I wouldn't say, I wouldn't have like a rule of thumb.

[00:01:48] It would be more about where it's coming from, right? Are you getting this from your database? Is it index that query indexed? Is this some third party API that's charging you? Where is it located compared to where this is located and how slow is it? So I would probably optimize for speed, cuz like maybe it's a CNS, that's all the, I don't know, halfway around the world and just getting one thing is slow.

[00:02:10] So I was like, all right, I'm not even gonna do that. We're just gonna get that some other time, cuz that's just too slow. So yeah, it's mostly that, because like, I don't know, you might be getting this all from memory or a file system. And Maybe it's fast reading a JSON file so it's like who cares if it's 20,000 things it's a JSON file it's quick.

[00:02:28] So that's what I will optimize for.
>> Thank you.
>> Yep, okay, so let's let's do just that I'm just going to copy this function and we're going to go to our slug page. So if we want to use the dynamic slug from, you know, getting those those slugs ahead of time and the server component, we have to add it to basically the index page of the dynamic segment.

[00:02:55] In this case it's slug. It'll be the slug on this page. So I'll go here. And I can say exports. What does it get? Get static params. So I can say exports default function. I can type get static params like that. Return an array of slugs code and then Angular versus React Angular like that.

[00:03:35] So we got to get static params. And then now and here, I should be able to, see the params and things like that. So I'll say params console log params like that. I also think I will have access to params in here too. So let's just see. So we'll do that.

[00:03:58] We'll go look at the output here. And you can see params gets logged right here. So the slug is the one that I went to, right? So it's only going to log the actual slug that matches the params that I typed in, right. So learn to code here.

[00:04:11] If I typed in Angular versus React we'll see that it logs out one Angular versus React so that one matches. So what you can do with that is inside of this page where you have params you can say give me the slug. Right. And slug is params. And then up here, you can say, const getData equals some async function.

[00:04:48] And you might say, post equals await getData, data from CMS and it takes in a slug, and this takes in a slug for your CMS and then you can return to post and you would just do this. All right, so now this page, well wait I gotta make this async.

[00:05:17] And obviously, this isn't going to run, I don't have that function. So now, this JSX will have to wait until I get the post that I can render down here. But first I had to get the slug first through the dynamic path. So this is how you can dynamically render content based off the params that it's in.

[00:05:40] Which is very equivalent, if you've looked at Next.js v12, where you're doing in order to do this and Next.js v12, you would have to use get static param and get server side props inside the same component. It's actually kind of similar, yet you have to return, you have to return something like this, it is very similar.

[00:06:02] But you can't do what I just did here, where we just do an async await inside the component. That's really the big change between v12 and v13 is that v12, I can do this stuff inside the component on server side, and it's only gonna be server side with this v13, but v12, I have to do something like export font, you know, exports a function, get server side props, and this is where I can do my async stuff.

[00:06:38] And now it's like well, this also runs on the client, but this only runs on the server and this file runs both on the server and the client. And how is that working? Well, you don't think about that anymore. This is always going to be server. Yes.
>> Can you talk about the relationship between the two pages again?

[00:07:03]
>> Absolutely. So, this is the index page for the dynamic slug. So, we have to tell Next.js. Next.js is basically saying, we're basically saying, "Hey, we have a dynamic page here at slug, but we don't know the parameters ahead of time." So Next.js is like, okay, cool. If you want me to pre-runner them, tell me what the routes are.

[00:07:26] That way I can use this page as somewhat of a template for each one of them, and I'll render them out for you ahead of time. But you're going to give me the routes so I can pass them to each time, every time I loop through one of those, I can pass them the, the slug that you're.

[00:07:42] Ahead of timer and pre-printed them. So we're like, okay, cool, we'll give you the routes ahead of time. And that's what we're doing here. We're saying here are all the routes ahead of time for all the dynamic slugs that we expect to have. So you might make an API call in here to your CMS that says, give me all the slugs of all the blog posts, and that's what you'll return here.

[00:08:01] It was like, give me all the slugs to the blog post. So now you know what pages need to be generated. When NJS sees this, it's gonna generate all those pages ahead of time, and then when it gets here, it knows which one of those slugs to pass in because that's the one that the router, the URL matched to, right?

[00:08:19] So, that's why you have to do that. You can't do that. I tried to do that here earlier. If you can't do that here because it's already too late because it didn't know to even render that because we didn't tell it here, it didn't know it, we couldn't even get here yet.

[00:08:31] It didn't know this, this never even got triggered, because it didn't know that that was a possibility. We have to we're telling it what's possible basically here.
>> You could do other things in this page as well.
>> You could. Yeah, I can. Yeah, I could totally put a component here and do whatever I want.

[00:08:47] I just, I just don't mean that this would be like the all blog page. This will be where all the blogs are, right? That's what this page will be. So yeah, I would have another component in here and probably another get data function that gets all the blog posts and it renders them inside that component.

[00:09:03] So yeah.
>> Does this get static prams limit in any way? I'm playing around locally and seeing that I can type in just foo bar into my slug list even without, like here's a list of blog posts and I seem to end up with the route all the same.

[00:09:17] So you're typing in foo bar here or?
>> No like in my browser. So like, I don't have it defined there, but I go and try it there.
>> Like that.
>> Yeah, yeah.
>> So I think what's happening here is what's basically happening is we're telling first of all right we're telling, this is giving a hint to Next.js that like these are the ones we want to build ahead of time.

[00:09:43]
>> Yeah, this is like what to cache.
>> Right this is what to cache and to expect and and then we're saying the ones that's not there are just always going to be dynamic. Just render those we don't care right. But it needed a hint at first like, even like are you are you expecting a slug?

[00:09:57] Like what are you doing here because. If you look at it, it put that underneath slug, even though we didn't but that's because we told it this thing is called a slug, right? And we told it's called a slug here so it knows. So that's basically all it's saying is it's like hey, we need to know, you can even get rid of all these and it will still work.

[00:10:14] Right like this should still work just fine. Right. It just needs to know that like, which one of these do you want to pre render ahead of time? If not, you need to return an empty array because if you don't return an array at all, I think that's where it starts to freak out.

[00:10:29] Right? If you don't return anything here, I think, I don't know. I think it's fine here to exist. I guess it just knows that if you don't want to return an array that's also fine. So yeah.
>> Regarding the server components, are the async React components a React 18 feature or are they a Next 13 feature?

[00:10:47]
>> The async components are server components and it's a React 18 feature that isn't fully released yet but Next.js has already adopted. React going forward? Will use server components. They will use client components. That has nothing to do with Next.js. That's just a future React. Next.js is just like, let's get ahead of it and make it easy.

[00:11:10]
>> And that's what they're doing?
>> Yes.
>> And regarding the get static params method. Is that the equivalent of using get static paths and get static props in Next 12?
>> That is the equivalent of get static paths and get static props in 12, yes.