00:00:00 Now, let's dive into routing.
00:00:03 One of Next.js' cool features is its ability to handle routes out of the box.
00:00:08 But before we jump into that, let's first understand how routes are created in React.
00:00:15 Here's an example of how a route can be created using React Router DOM version 6 in React.
00:00:22 We first import all the necessary packages from React Router DOM.
00:00:27 Of course, after installing it as a separate package, then we initialize our app, which is a functional component, wrap everything in a router,
00:00:36 routes, and then we create a new route with a path and element for each one of the pages we want to have within our application.
00:00:44 And here's an example of a nested dynamic routing for a multi-page website like an e-commerce site.
00:00:52 As you can see, things get complicated pretty soon.
00:00:55 And this app isn't even that big.
00:00:58 Scary, isn't it?
00:00:59 Not only do we need to download and handle an external package, but as our application gets bigger, the routing becomes more complicated,
00:01:08 making it harder to manage and understand.
00:01:11 Now, let's explore what Next.js brings to the table when it comes to routing.
00:01:16 Next.js aims to simplify the process by using a file-based routing system.
00:01:22 And what does that mean?
00:01:24 Well, folders are used to define routes and files are used to create UI for that route segment.
00:01:33 For instance, to convert the previous React.js example into Next.js, we only need to create two folders named About and Contact,
00:01:43 and then we'll create a special file associated with that route segment inside each folder, a file called Page, with an extension of js,
00:01:52 jsx, or tsx.
00:01:55 Now, let's understand it while we code.
00:01:58 Quickly create a new folder, and we can call it routing, and then drag and drop it to your empty Visual Studio code.
00:02:06 While in there, go to view and then terminal to open up a built-in integrated terminal.
00:02:12 And we can quickly spin up our Next.js application by running mpx create-next-app add latest and then dot slash and press enter.
00:02:22 It's going to ask us a couple of questions.
00:02:24 For now, let's say yes for Tabscript, no for ESLint, yes for Tailwind, no for Source, yes for Router, no for Alias, and this is it.
00:02:34 I just press enter on all of them.
00:02:37 This is the default installation process.
00:02:40 This is going to install all the necessary packages we need and no additional package for routing.
00:02:45 That's important.
00:02:47 Once the packages get installed, you'll notice a basic file and folder structure.
00:02:52 Now, let's clean it up a bit.
00:02:54 Go to the globals.css file, delete everything that's there, and simply add a couple of properties.
00:03:00 Main, padding to rem, display flex, justify content center, align item center, and flex direction column.
00:03:10 Then you can go within your page.tsx and remove everything, including this main tag.
00:03:18 This is all just basic boilerplate from Next.js.
00:03:22 And the only thing we want to have in there is going to be a main tag that's going to have an h1 of home.
00:03:28 Now let's simply save this file and run it by running npm run dev to ensure that application is working correctly.
00:03:37 And there we go.
00:03:38 You can see home right here.
00:03:41 Now, let's create a simple navigation bar component to move between different pages.
00:03:46 Create a new components folder inside of the root of the application.
00:03:52 and inside create two files.
00:03:55 One is going to be called navbar.jsx and the second one is going to be called navbar.module.css.
00:04:06 Within our navbar folder, I'm going to paste the code that you can also find below this lecture.
00:04:13 It's going to be a simple navbar component.
00:04:16 In case you want to follow along, feel free to pause this video and type it out by hand.
00:04:21 We first have to import some things right here.
00:04:24 But you can also just listen to me and understand the concepts that way.
00:04:28 Or you can copy this and then replicate the entire application and then go through it and change some things around to fully understand what's happening.
00:04:35 But still, I'm going to explain every single little detail.
00:04:39 First, we want to import the link component from NextLink.
00:04:43 First, we want to import the link component from NextLink.
00:04:47 And we also import some styles so that our application looks better while we showcase it.
00:04:52 Then, we create an HTML5 semantic tag called header and nav.
00:04:57 And most importantly, we create an unordered list of links where we have each individual link pointing to a different path in our application.
00:05:06 And below, you'll also be able to find the styles.
00:05:09 We're simply styling a navigation bar here.
00:05:12 Nothing too complex.
00:05:14 But now, to ensure that this navbar is appearing on all route pages, we have two options.
00:05:20 The first option is to import the navbar in each route page.
00:05:25 For now, we only have one, but imagine if our app grows, it's going to be hard to import the navbar into every single page.
00:05:32 And keep in mind, that's how we have been doing it in React so far.
00:05:36 And the second option is to import the navbar component in the parent component of these routes, such as layout.tsx.
00:05:44 Importing it into the layout component will consistently display it across all routes.
00:05:49 So going to the page, importing it right here at the top of the page and then displaying it as a self-closing component right here within the main is the
00:06:00 wrong choice.
00:06:01 We don't want to do that.
00:06:03 because then once we create a new page, we would have to replicate this entire thing.
00:06:07 Not ideal.
00:06:08 So the right method is to go within the layout.tsx, import the navbar right here, and then call it right here within our body.
00:06:19 This is now going to appear in all of our pages.
00:06:22 And by now, if you have followed all the steps properly, you should see this inside your browser.
00:06:27 Next.js, and then these three links on the right side.
00:06:31 And now it is routing time.
00:06:33 To create a route for the about page using the file-based routing system, we need to create an about folder inside of the app directory.
00:06:42 It is important to ensure that the file name inside this folder is lowercase, as the name of this folder will be exactly the same as the route.
00:06:52 So let's create an about section.
00:06:55 After creating the folder with the name about, create the special UI file called page.js or JSX, or in this case we're using TypeScript,
00:07:05 so TSX is fine as well.
00:07:08 And there, we'll simply need to export default function page, we'll return main H1, but this time it's going to say about.
00:07:18 Well, that's it.
00:07:19 Go to your browser and click the About link in the nav bar.
00:07:24 You will notice that the URL changes and the text displayed switch from home to About.
00:07:30 How easy is that?
00:07:32 Especially compared to the ReactJS code we examined at the start.
00:07:36 Now go ahead and create a route for contact in the same way.
00:07:41 Within the app directory, create a new folder called contact.
00:07:45 Within it, create a new page called page.tsx.
00:07:51 And once again, export default function, contact, contact.
00:07:56 After saving the changes and returning to the browser, if you click contact, you get redirected.
00:08:03 and you didn't even have to reload the page.
00:08:06 All modifications are immediately visible without the reload, all thanks to Next.js' fast refresh feature.
00:08:13 That was all about creating a simple route in Next.js.
00:08:17 But what about nested or dynamic routes?
00:08:20 What do we have to do?
00:08:22 Well, let's explore.
00:08:23 Nested routes are as simple as nesting one folder inside of another.
00:08:28 For instance, we wish to set up a route named projects forward slash list.
00:08:33 To achieve this, we can create two folders.
00:08:36 The first one is going to be called projects and within it, another folder called list.
00:08:44 And then inside of the list, we add that page dot TSX file containing the interface for the project list.
00:08:55 And to simplify the navigation to this page, let's quickly include a link tag within the home page.
00:09:02 So inside of our home page, right here, we can add a new link tag, which we can import from next link.
00:09:12 It's going to say C projects and we can give it an href equal to forward slash projects forward slash list.
00:09:22 If we save this and now visit the homepage, you'll see C projects and clicking on this link will take you to the route we created,
00:09:32 which is forward slash projects forward slash list.
00:09:36 And here you can see it in the URL as well.
00:09:39 So, simply nest folders within one another and create whatever route you want.
00:09:45 Moving forward, we have dynamic routes.
00:09:48 Think of it as nested routes, but with a slight difference.
00:09:52 Unlike traditional nested routes, where we need to know the exact route name in advance, dynamic routes allow for more flexibility.
00:10:01 The route is determined based on changing data in the application, so we don't need to predict it beforehand.
00:10:08 For instance, if we need to show various project details, we can design a single details page with a consistent layout for all projects.
00:10:17 The only difference is that the data or the content will change for each project.
00:10:23 So instead of making separate routes for every project details page, you can use a Next.js's dynamic route.
00:10:31 To create a dynamic route, we'll have to wrap the folder's name in square brackets, symbolizing that the content inside the square bracket is a variable.
00:10:40 So continuing on our current application, let's add a feature for displaying project details.
00:10:46 Imagine we have three projects, named jobit, current, and hipnode.
00:10:51 And coincidentally, these are the code names of the projects within the master class.
00:10:57 We need three routes to showcase these projects.
00:11:00 So if we go to our app and then our project list, we can now create three different folders.
00:11:06 JobIt, CarRent, and we can also do Hipnode.
00:11:13 And now we would have to create a new page.
00:11:16 Although the content is mostly going to be the same, we have to duplicate it instead of each one.
00:11:21 And imagine if you had 99 projects.
00:11:24 Or imagine if you allowed your users to add projects.
00:11:27 You would have the unlimited number of them.
00:11:29 So this is obviously not the optimal way.
00:11:32 And you would even have to keep copy pasting the similar project details code.
00:11:37 This is where dynamic routes come to rescue.
00:11:39 So let's delete all of these folders right here, and let me show you what I mean.
00:11:44 Within the existing projects folder, create a new folder with a name enclosed in square brackets.
00:11:51 So forward slash slug.
00:11:53 Slug is simply a name for the ID within the URL of that project.
00:11:57 But you can choose any name you want, such as ID or name.
00:12:02 In this case, let's use name for simplicity.
00:12:05 And within it, we can create a new page.tsx file.
00:12:10 For now, let's simply render what we did all the time, which is the project name.
00:12:15 To access this route, we will include a link to our hypothetical projects on the project's list page and give them a bit of styling.
00:12:24 So I'm going to import the styles.
00:12:26 And under my projects, I'm going to show a UL that's going to contain three different links.
00:12:34 So first, let's indent this properly.
00:12:37 And second, let's import the link coming from next link.
00:12:41 So pointing to project's job bit, project's current, and project's hip node.
00:12:46 And just to style it a bit, I can create this new projects.module.css and paste the styles right here.
00:12:56 Feel free to pause this video and type them out if you want to, but it's truly not necessary.
00:13:01 You can watch me go along.
00:13:03 And is there anything else that we need to do?
00:13:06 Well, no, that's it.
00:13:09 If you go back, you can see three of these links appear.
00:13:12 And if you click on them, sometimes it takes a bit longer on localhost, but on the deployed website, it is instantaneous.
00:13:20 and you will be redirected to projects in that URL and you'll be able to see project name.
00:13:25 Same thing, if we go back and click on current, you see you're on this link pointing to this page.
00:13:31 However, something doesn't feel good.
00:13:34 While the route for these projects changes correctly, it would be great to see the actual project name displayed on the respective routes page instead
00:13:43 of the static project name.
00:13:45 So, how do we do that?
00:13:47 Well, the name part here is our dynamic route segment, and Next.js provides us a way to access what value has been passed through the params prop passed
00:13:59 to the page.js.
00:14:01 So to utilize the value of this dynamic segment, we need to get it right here through params.
00:14:08 And then, that's going to include projectParams.name.
00:14:14 And this is going to be equal to whatever you have in the square brackets right here.
00:14:19 So if it was an ID, then you would have to say params.id.
00:14:22 Whatever name you provide, it will be the same name to access the value through the params object.
00:14:28 And now, if we go back, you'll see projectCurrent.
00:14:32 If we go to Home one more time and click See Projects and go to Jobit, you can see Project Jobit and Project Hypnote.
00:14:40 These are automatically created dynamic routes that we created by simply creating one simple dynamic route folder and file right here.
00:14:49 Pretty amazing, isn't it?
00:14:52 But that's not even the end of routing in Next.js.
00:14:56 Coming next, we have route groups.
00:15:00 While working in a file-based system, having many folders right here may not be ideal, because you can easily get lost within all of them.
00:15:09 But you have to have them, because that's how you do routing in XJS, right?
00:15:14 So to address this and offer better control over folder organization without impacting the URL structure, Next.js introduced a feature called route groups.
00:15:26 How do we make sense of it?
00:15:28 Well, consider the existing structure.
00:15:30 We already have three folders, about, contact, and projects.
00:15:35 Now, if we need to add more functionality like sign in and sign up, we would have to create more folders within the app folder,
00:15:42 causing it to grow larger and larger.
00:15:46 Well, what if we could limit the number of folders inside of the app folder to a maximum of 1 to 3 and include everything within these folders while maintaining
00:15:58 the same route path?
00:16:00 In this case, if we try to accomplish a structure that looks like this, where we have app and then auth and then sign in within it,
00:16:09 this is going to impact the routing.
00:16:12 Why?
00:16:12 Because as we learned, each folder name serves as a route.
00:16:17 So if we do it in this way, the route name for the sign in page would be forward slash auth, forward slash sign in.
00:16:25 And same thing for the sign up.
00:16:28 But we intended something else, right?
00:16:30 Our desired route names are simply sign in and sign up.
00:16:34 No auth beforehand.
00:16:36 But we still want to maintain a proper file organization.
00:16:39 We don't want the auth to be included in the URL, but we do want it in our current code structure.
00:16:46 To meet this specific requirement, we have route groups.
00:16:51 They help organize routes into logical groups like auth, team, dashboard, and more.
00:16:57 We can create a route group by enclosing the folder name in parentheses.
00:17:04 So let's create two different route groups within our application.
00:17:07 Primarily, we're going to do one called Auth and one called Dashboard.
00:17:15 But notice how I wrapped it in parentheses.
00:17:17 Now within it, we can create those Auth pages we're talking about.
00:17:21 So we're going to have a sign in and we're going to also have sign up.
00:17:28 And within those, we're going to have page.tsx that's going to say sign in and we can duplicate this and create a new page.tsx and this one is going to
00:17:44 say sign.
00:17:48 And now these are within the enclosed route group.
00:17:51 So here's how the structure appears.
00:17:54 Everything gets enclosed within here.
00:17:56 Now let's transfer the remaining folders about contact and projects into our dashboard route group.
00:18:02 So we'll simply drag and drop them within it.
00:18:11 Now, once you transfer all the files, a simple structure should look like this.
00:18:15 A simple auth folder with a sign in and sign up, and a simple dashboard folder with about, contact, and projects.
00:18:22 All set.
00:18:23 Now let's put our application to the test.
00:18:26 If we go to the homepage, everything works.
00:18:29 About.
00:18:30 Same thing.
00:18:32 Contact.
00:18:33 Works as well.
00:18:34 And then if you navigate to the project list, that works as well.
00:18:38 And each project details page works too.
00:18:42 How surreal.
00:18:44 No code breaks, and everything works flawlessly.
00:18:47 As if nothing had happened.
00:18:49 The URL, the linking, everything is functioning perfectly, and all on the first try.
00:18:55 Moreover, now if we modify a URL to sign in, you can see the sign in appear right here.
00:19:04 And same thing for the sign up.
00:19:06 It's not under auth sign in and the sign up, it's just sign in or sign up because we used route grouping.
00:19:14 That, my friend, is the beauty of Next.js 13. And is that the end?
00:19:20 End of routing?
00:19:21 Well, of course not.
00:19:23 There are two more amazing client-side routing features, parallel routes and intercepting routes.
00:19:29 And not to forget, we also have API routes.
00:19:33 We will discuss some more about these in the advanced routing chapter.
00:19:37 Now, I have a task for you.
00:19:40 Create a complete routing structure for an e-commerce project using different routes.
00:19:46 Here are the expected routes we want to have.
00:19:48 Homepage.
00:19:50 Product listing page.
00:19:51 product listing details page, shopping cart page, checkout page, order confirmation page, user account page, login page,
00:20:01 registration page, and search results page.
00:20:05 Try building it out using the route concepts we just learned.
00:20:10 Next, explain how does the Next.js routing differ from React.js routing?
00:20:16 What is the purpose of route groups and how can they be created in Next.js?
00:20:21 And finally, what is a dynamic route and why should we create dynamic routes in web applications?
00:20:28 This was a great lecture.
00:20:29 I hope it was truly eye-opening and I hope that you like this file-based routing system as much as I do.
00:20:36 At this point, I would highly recommend spinning up a new Next.js application and just playing with it a bit.
00:20:41 Try creating folders, files, route, pages, layouts and just test it all out.
00:20:47 See how it works under the hood.
00:20:49 You have to test it to be able to fully get it.
00:20:52 Not just listen to me talk.
00:20:54 So do some testing and I'll see you in the next lecture.
