Introduction to Next.js Routing with Pages in Next.js

Transcript from the "Routing with Pages in Next.js" Lesson

[00:00:00]
>> So routing with pages in Next.js. When you're creating a vanilla React app, you have to decide which routing library, which version you wanna use. And they're all really good and there's new ones popping up every day. And you might argue that they are standard ones out there everyone uses, but you still have to make that decision and you still have to install it and you still have to set it up.

[00:00:24] And then there's many ways to set it up. And you gotta hope that everyone on your team knows those ways and they researched it just as much as you. It's just a lot of overhead for something so necessary. With Next.js, you don't have to worry about that. They created the conventions, right?

[00:00:39] So this is convention over configuration. So if you follow their conventions, then everyone can actually benefit from something like a nice router. And their convention is actually just create a file. So to get started with the routing and pages with Next.js, let's just head over to the code here.

[00:00:55] We're gonna open up, I'm gonna make a new folder called Pages right on the root. And you'll notice that you get this nice little thing here on VS Code, this little icon. And then inside here, we're just gonna make a new file. I'm gonna call it index.jsx. You can put .js if you want.

[00:01:14] If you like TypeScript, we'll talk about TypeScript later and how you do that with Next.js, but if you like, js, you could put js, I'm just gonna put JSX. And then all I'm gonna do is import. I'm just gonna make a vanilla React component. So nothing special here, nothing specific to Next.js.

[00:01:30] I'm just gonna import React from react. I'm gonna make a Page component like this. And I'm just gonna have it return a div that says Index Page like that. And the most important part is it needs a default export that Page like that. So nothing special here. Once you do that, if you're following along, you should now be able to use this dev command that we have.

[00:01:56] So I'm just gonna go back to my terminal here. And I'm gonna run yarn dev like that. And you can see it says compiled successfully, which is a good sign. And right now it's on localhost 3000. So I'm just gonna open that up, go to localhost 3000. You can see I have my Index page here, right.

[00:02:18] And we got that for free. You notice, like I said, we didn't have to set up a route or anything like that. All I did was put a index.jsx file in the pages directory on the root of this application, and I was able to get an index page for free.

[00:02:32] Very simple, it doesn't get easier than that. Let's head back over to this. So like I said, you should be able to navigate there. So now if we wanna do something a little more complicated I guess, which are like nested routes. So if you want a path that looks something like this, so we did the index, but what if we have something like project/settings, or even something that's dynamic where it's like, /user/ID, where ID is the parameter.

[00:02:59] Don't even worry, we can do that too with Next.js. So this this part is gonna be a little different. And this is very specific to Next.js, I don't think I've seen any other framework take this exact convention about how they do parameters. So Next.js is very unique in this case, but it's actually pretty simple.

[00:03:16] And the way we can do that is actually just create some folders. So for instance, let's say we wanted to create some folders, or I'm sorry, we wanted to create a route for our notes. So in this case, for our note taking app, we're gonna need the /notes route where all of our notes are gonna load up.

[00:03:33] And then we're gonna need the /notes/ID, where we load one note, right? So we're gonna need both of those routes. We already have the index. So we need to make both of these. So in order to do that, what we can do is we can just head over to our pages.

[00:03:48] And then because both of these routes are gonna be underneath the Notes app, because this is actually if you think of it, it's actually like the index of the notes. So there's a file in here that we have to use. And then in here, there's an ID property.

[00:04:00] So both of these are actually underneath the notes path. So we need to create a folder here called Notes like that. This is gonna tell the pages directory that hey, this is a sub path, it's a nested path. And then to create the index for that, I just put index.js, right.

[00:04:16] So whenever you create an index file in a folder in the pages directory, it's gonna create the route for that index of that sub path, right? And then what we can do is we can just do the same thing. I'm gonna copy this, I'm gonna paste it here.

[00:04:32] I'm just gonna call this the Notes index path like that, okay? And then when it comes to creating something dynamic, as in, we need a parameter or something like that. Not query strings, because you don't have to make routes for query strings, you can just use query strings just like any other app.

[00:04:52] But for parameters, the way we can do that with Next.js is we can use this syntax. So we can use these brackets like an array. And then you can put the name of the parameter. You can name the parameter whatever you want. In this case, I'm going to call it ID, and I'm gonna day .jsx.

[00:05:03] So what this is telling Next.js is that, hey, this route is actually going to have a parameter in it called ID. So if we follow the folders, it's actually going be, the path to this will be /notes/ID. And that's what's gonna get loaded here. So I can just go ahead and paste that in here.

[00:05:29] And I can say, Note page. Like that, right? So everybody following me so far? Any questions? Okay, cool. So, now if I have that, I can go here. And if I redirect to notes, you can see I'm in the note index path like that, okay. And then if I go to notes/ some random ID, you can see I'm on the note page, all right.

[00:05:57] Pretty straightforward. What happens if I try to go to something else? We get a 404. So we get that for free with Next.js as well. We get a nice, arguably a very beautiful 404 page, in my opinion. I mean, just some simple stuff like this is, I'm a big fan of.

[00:06:13] That's a nice 404 page. So we get that for free. So yeah, pretty cool there. Looking at this, you might have noticed this battery pack looking icon here. I didn't put this here. And if you hover over it, it says something about a pre rendered page. You can click it, it'll take you to some place that tells you about all types of optimizations that they're doing.

[00:06:37] And we'll get to a lot of this stuff later. But basically what this is doing, it's letting you know that this page was optimized by Next.js, and it was pre rendered ahead of time. The HTML was created before it was sent to the server. So this didn't load on the client, your React component was actually rendered on the server and sent down as HTML.

[00:06:57] And that's what this is telling you. Like, hey, this page was pre rendered. It's letting you know that this was it. And it's actually very helpful to let you know, because as you will find out later on in the course, you can opt in and opt out out of different pre rendering modes depending on how you fetch data.

[00:07:13] It's very helpful to know at what time a page is pre rendered or not during development. So it can be very helpful. Right now, it's just like, yeah, we're not doing anything. But trust me, this gets helpful in the future, and I'm a big fan of it.