Jamstack Explorers

Next.js from the Ground Up with Cassidy Williams

Next.js Dynamic Routes

Sometimes you have routes in your Next.js application that aren't always predefined. In this stage, we'll talk about how dynamic routes work, and the method getStaticPaths.


[00:00:00] Let's talk about dynamic routes. Sometimes when you're building a larger application, some of your routes aren't always predefined. In Next.js you can make [00:00:10] what are called dynamic routes by adding brackets around the file name. Let's do a fun little example together. Let's go into our pages directory, and we have our Pokemon.js. [00:00:20] What I want to do is I want to make a new folder and I'm going to call that Pokemon. Then we're going to move Pokemon.js inside of there. Move it right there. [00:00:30] Then what we'll do is we'll rename this file. It's going to stay as Pokemon.js, but we're going to add brackets around Pokemon. [00:00:40] Now this is a dynamic route. As a result, when you go to the browser, we have a 404 page because we haven't actually defined [00:00:50] what's supposed to go here. Let's fix this by making our dynamic route a little bit smarter. Now, currently in our page component [00:01:00] here, the page content is pre-rendered based on external data via gets static props, but now we want to have both the content and the available [00:01:10] paths rendered based on external data. There's a function for that. Very similar to get static props called, getStaticPaths. With this, we can define all the [00:01:20] paths that we can use with this page component. We want to do export a sync function, get static paths, [00:01:30] just like that. Now, what we want to do is we want to use the Poke API again, to get all of the names of the different Pokemon that we want to [00:01:40] have paths for. I'm actually going to copy this from here down in get static props over to get static paths. Then instead [00:01:50] of having this Charmander thing at the end, what I'm going to do is have a query where it's limit 151. [00:02:00] We're just going to have the first 151 Pokemon represented here. Now we want to create a paths variable. We'll do let paths [00:02:10] is equal to, and then we're going to get the results from this Pokemon right here, this Pokemon object that came from that fetch. We'll do Pokemon.results [00:02:20] and then dot map. We're going to map over each of those Pokemon and take out their names. We'll do Pokemon P [00:02:30] and then inside of here, we will return a path. We'll do slash Pokemon because that's the folder that we're in. We're defining [00:02:40] the full path, not just where we are currently, and then the pokemon.name like that. These are all of the paths that we want to be represented in this component. Then [00:02:50] we want to return it and get static paths. We'll return an object that has paths and fallback [00:03:00] is false. Now, at build time, we will pre-render all of these specific paths that are in this variable with these Pokemon names [00:03:10] and with fallback equals false right here, that means that all undefined paths should 404. We'll talk a little bit more about what happens when fallback is [00:03:20] true in the next section. Now that we've returned all of these paths, what we need to do is actually use the parameters that we get in there. To use those parameters, we [00:03:30] go back to our friend, get static props, and we're going to pull out params. Now the variable that we want from params is actually the name of this file. It's Pokemon in those brackets. [00:03:40] What I'm going to do here is I'm going to use this string and I'm going to put a variable in here. It's a template string. We're just using another variable [00:03:50] and we'll do params.pokemon, just like that. That should be it. It should fetch all of those Pokemon names, use them, [00:04:00] and then turn those into URLs. Let's look at it in the browser. If I turn this into Bulbasaur, look at that, we got Bulbasaur. Then [00:04:10] we could also do Pikachu. We could also do something like Ditto. All of these things have been pulled. We're getting the data [00:04:20] from the URL and it's put out there. Again, this is really powerful because it's all happening at builds time. We're making these API calls now, but once we [00:04:30] have that data, we don't necessarily need to query for it again when we're a user of this application, because we're compiling it to a static application. This is how you [00:04:40] do dynamic routes in Next.js. [00:04:46]


your progress