Check out a free preview of the full Introduction to Next.js 13+, v3 course

The "Parameter Q&A" Lesson is part of the full, Introduction to Next.js 13+, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Scott explains the concept of using generateStaticParams() in conjunction with dynamic route segments to statically generate known routes during the build process. The segment also addresses student questions about accessing query parameters.

Preview
Close

Transcript from the "Parameter Q&A" Lesson

[00:00:00]
>> The other thing I wanna talk about is when it comes to dynamic routing. It might not always be the case that you don't know the URL in which you want to use sometimes. Sometimes you do know the URL, like let's think about what's a good example of this?

[00:00:17]
Well, I guess in the case of documentation or the case of documentation, or maybe a blog post where there's an opportunity, it is not so dynamic where it's user generated content. For instance, if your Facebook, you wouldn't know all the IDs, you'd have to query the database, give me every single ID and then you would know all the IDs, but that's just a massive operation, why would you do that?

[00:00:40]
But I don't know, maybe you're writing a blog post and you can go to a CMS and get all the titles or all the slugs for a blog post ahead of time. So you could know them all if you wanted to, and it's not that bad. And maybe you want to generate those pages statically ahead of time, you wanna generate the routes.

[00:00:57]
Whereas right now what's happening is the routes are the pages are basically being generated dynamically because we don't know what the URLs are. We don't know what these values are, so they're being generated dynamically as in when someone goes to that route, that's when that page gets rendered.

[00:01:14]
We can avoid all that and instead send back a static version for every instance of the page, right? So, what I'm describing is, every time I go to this page, sure it's the same page for every single ID here, but the page gets executed on a server every single time because it has to, because the parameter changes, which means you'll probably have different data.

[00:01:40]
To avoid that, we can send back a static page that never gets executed other than the first time for performance for things that don't need to change like a blog post or a documentation page, because there's nothing dynamic about that. Once you write it's always gonna be that way until you publish it again.

[00:01:56]
So what you can do is you can generate and tell Next.js, actually I wanna make some of these pages static. And Next.js I will say, well, what are those URLs that you want to make static? So you can use something called generate static params, which will allow you to tell Next.js these are URLs that I know that I have.

[00:02:18]
I want you to go ahead and render those at build time to HTML for every single instance. So that way when someone navigates to it, you can just send them back that HTML without you having to execute that function again on the server when someone navigates to it.

[00:02:33]
Does that make sense? Okay, so the way that would work is basically you can only do it, and yeah, the rest of the stuff is just me talking about the dynamic stuff, but the way that that works is you can only do it inside of a page that comes from something dynamic like this.

[00:02:53]
And then you just have to send back a bunch of URLs. I don't wanna get into it too much 'cause we're gonna talk about it later in the course, but I just wanna just bring that up just in case someone asks questions about it. Cool, any other questions

[00:03:06]
>> People are asking about query parameters? Query parameters, Okay, the thing about query parameters is, it depends on where you want to use the query, or where do you want access to the query parameters. Getting access to the query parameters inside of the browser, you couldn't use a server component, you'd have to use a client component, which you haven't talked about yet, but actually nothing's really changed there.

[00:03:34]
You can get the query parameters any way that you previously could have gotten the query parameters, whether it's through the window or through something that Next.js actually provides, which is called from next or actually, hold on. Is it next location? Or no, next router, you can use the use router, which will allow you to use a hook and get the query parameters, but again, this is only gonna work on a client component.

[00:04:01]
I think they also have a, what is the other one? Use path. Maybe not, use routers the one you wanna use, but that's only gonna work on client side. For server side, if you wanna get the query parameters, that's gonna depend on, basically the query parameters are not gonna be attached to these parameters.

[00:04:28]
Query parameters and route parameters are gonna be two things. So if you wanna get the query parameters on the server side, I don't think you have access to them on the service side. We can test that. I'm almost positive if you don't. Let's see. Hello, There, see what that says?

[00:04:46]
Yeah, you're not gonna have access to them here on a server side like that. So you have to get that on the client side, which is usually why people do query parameters. It's like for that reason, so. Cool, any other questions?
>> Someone said, use search params is really easy for query parameters client side.

[00:05:12]
>> Yeah, so there's a hook. It's mostly all client side. You're not gonna be able to get access to them on server side.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now