Introduction to Next.js 13+, v2 File-Based Routing & Params

Transcript from the "File-Based Routing & Params" Lesson

[00:00:00]
>> Okay, let's talk about file based routing, which I think is probably the best feature of next year FM IP. And it is absolutely insane. I really do love this feature. Even though we're using the app directory, if you're coming from a previous version of Next, it works kind of the same.

[00:00:15] There's just one or two changes that really upgraded I think, without really affecting how you think about it. But for the most part is basically the same. So I have a bunch of notes and stuff here that talks about it. I'm just gonna go through it in the code because it's just so much easier for me to do that, so let's just do that.

[00:00:33] Cool so, in this app directory let's just see what we got here so if you notice we have this page.tsx. And this points to the route here, the root. It points to the root. And that's just how Next.js treats its router configuration. So if you were making a React app, you would probably have to download React Router somewhere in your app file or you import your react router.

[00:00:58] You'll make all these routes and then, say, render this component for this route. Okay, we don't do any of that here. It's all based off of your file names, your folder names and different things like that. And then at when you run the build command, when you run the dev command, Next.js will create that router for you.

[00:01:14] Which I think is a lot more intuitive and easier to understand. And from what I've seen people having 5 to 30 different route files split up across. I'm like, I can't follow this route. So I don't know what's going on. So I kind of prefered here it was just really cool.

[00:01:30] So let's dive into it. So right now, with page.tsx and app directory, if you want a page, it actually has to be called page. The file name has to be called page. So my example I'm using TypeScript, so it's page.tsx. We're using JavaScript. It might be page.jsx, or page.js, but it has to be called page.

[00:01:50] And because this is the only page in the root of the app folder, it's the index page. So for instance, if I wanna make another page here, I couldn't because if I made another page on the route and there's already a page on the route, which page would it render here?

[00:02:09] I don't know. You can't, right? So what I would want is another route here. So maybe I wanted to go to like about or something, right? So if I wanna go to about, without a 404 like that. What I can do is I can go into the app directory, and I can make a new folder with that path name.

[00:02:26] So in this case about so I'll make a new folder, call it about. And then inside of about, I can make a page like that. And that's what's gonna render when I go to about, so if I just put some stuff in here. Like this, I just render some basic stuff like that.

[00:02:55] Save it. And now if I go back to about, there we go, about, we get our about page. And that's one of the biggest difference between 13 and 12 is that on 13, you didn't have to make a page file. You had to make an index file for the index of that folder, and then every filename after that was a segment.

[00:03:19] So it got it got really sloppy and you can get conflicts a lot. I think this is just way more explicit like every page has to be called page. And if you want a different segment as you want another slash and your route, you need a folder. It keeps it simple.

[00:03:36] And you can nasties, right? So if I had something else in here about me for some reason, I can do that too. And I can say, put a page in there and copy that. Go here, say me, and now I can Next. So now if I go to about, it'll still render that one, why does it keep trying to add a dot?

[00:04:03] I don't know. There we go. That still goes to the about there, but then if I go to about me, then it'll render me. So any questions up to this point so far? It gets deeper, this is just scratching the surface
>> Query params is the next question.

[00:04:23]
>> Yes.
>> I'm guessing that's yeah.
>> Yes, query params is coming soon, yes. Any other questions about how this works. No? Okay, awesome. So create params why do we need to like create params for? Obviously some routes are dynamic, user IDs, BlogPost titles and things like that.

[00:04:44] Not all path names are known ahead of time and they have to be dynamic because they're coming from somewhere, and that is where Next.js shines not even just the routing of how that works. But how you fetch that data which I cannot wait to talk about later in the course because that's some of the biggest changes in this update.

[00:05:01] It's like a huge mental model shift. But for now, we'll focus on the routes and dynamic paths and query string and stuff like that. So if you wanted to do that let's say we had to, get rid of this meeting because this bothered me. Let's say we had a blog.

[00:05:15] So we'll make a new folder here because this app is gonna be like my home site where I show off all my stuff and also have a blog. So I have a blog here and then the blog is gonna have a blog entry page where if you click on that, if you go to just slash blog, it'll show all my blog posts, right?

[00:05:32] But then if you click on one of those blog posts, I need to go to just that one blog post right so I need like the slug or the title or whatever you're gonna put for the blog post to identify it. So inside this folder, I'll make a new folder.

[00:05:44] But because I want it to be my site/blog/ whatever the slug is, I don't know what the slug is, so I don't know what I would call this folder, because whatever I put here that's literally going to be the path name. So I can't put the word slug here because it would be slash blog slash slug and that's not what I want.

[00:06:04] So I had to tell it Next.js like this is dynamic, you could do that with these square brackets. So I can say slug like that. And that's gonna tell it Next.js like, this is a dynamic piece and the parameter is called slug. So when I reference this in JavaScript using some router thing that they give us, I can reference it as the slug and the accurate the value from it.

[00:06:25] So I'm gonna say slug and then like everything else, I gotta put a page in here, like that Right and then I can split a component, so. All right, so now if I save that, I go to- Blog, did I have page for blog? Yeah, I didn't put anything in it.

[00:06:59] Yeah, okay, so if I go to blog/ literally anything, it'll go to the post. And we'll talk about how you can get that slug and do stuff later when we get data. But for now, this is how the router works. It's pretty cool. When I first found this out in Next.js, I was like, yeah.

[00:07:21] This is different, I like this, it's really cool. So, really a big fan of it. And then it goes a little further, we could talk about some of those things, but they're mostly just for advanced use cases or if you're just like, I don't know, really efficient. But you can do what's called catch all routes where not only do I match, like blog slash slug but match everything after it as well without having to write more definitions.

[00:07:49] So if you wanna match routes after the slug without having to define it with multiple folders, maybe you don't know how many paths are after it, so you won't even know how many folders to define anyway, because it's dynamic. If you can do what's called a catch all route which basically just means you can wrap this in a square brackets like it was before, and then just do the dot, dot dot.

[00:08:11] And that is basically going to match everything after slug forever. So you don't get a four four like this. So I can just keep going. So this is great for documentation website actually. I would use something like that for documentation website where it's like, I don't know, this documentation thing might nest forever, it could go on forever.

[00:08:32] I know Next.js uses that for their documentation website. You can look at their URL hierarchy to see how they manage that, but I know they use the catch-all for that. Any other questions on routing? For the most part, that's all routing. If you don't really need anything outside of that, then I can think of any other use cases you might wanna do.

[00:08:54] And you might be like, well, what about like I wanna load something up before it routes or I wanna intercept the route and do stuff. They are working on an RFC for intercepting things. But as the question that someone asked in the chat earlier, there's something called middleware that allows you to do stuff.

[00:09:12] I think it's maybe a little advanced for this one, because it's kind of crazy, but if we get to it, we'll get to it. But they are working on a more streamlined way of intercepting routes, but you can also kind of do it on the page level as you'll find out when we get to fetching data.

[00:09:27] And just how like react suspense works and things like that. So we'll get there.
>> What about private routes.
>> Private routes are as unlike routes that are authenticated. Okay. There's really no built in mechanism in Next.js where you can just like flip a switch and like this is a private route, that is left up to you.

[00:09:48] So you could use middleware, it depends on how you wanted to protect it. So like let's say you were using cookies to protect a route, you could use Middleware, because Middleware has access to cookies and you can just check a cookie if it's there and if it's not, redirect somewhere else.

[00:10:04] You could do that on the route itself, where you go to the route, but before you render it, you check something, whether it's a cookie, whether it's local storage, however you're checking your auth. And then if that's not the case, you can redirect yourself and you can just abstract that away into its own function somewhere that you import whatever you want.

[00:10:22] So that's typically how you would probably do it. I would think most people who have done in the next 12 would have done like get server side props or something like that. And inside of there, they would have checked a cookie to see if you're authenticated. If not, they were redirected somewhere.

[00:10:35] There's no more get server side props. So you have to do something different here and we'll talk about that when we get to data fetching. But no, there is no built in mechanism that Next.js gives you right out of the box based off file based routing or anything that says this is protected because it doesn't know how you are protecting it.

[00:10:52]
>> Just curious, where's Next serving that 404 page from?
>> Yeah, that's a good question. So Next.js has a internal built in 404 page that you can override if you want. And I believe in the app one, it is called not found. You just make a not found file which I think we could test that later when we get to all the special pages part that I'm talking about.

[00:11:19] But yeah, by default it will serve that 404 page. You can overwrite it if you want though.