Next.js 14 Tutorial - 5 - Routing

now that we know how to create a new next year's project and what the project structure looks like it is time to dive into the different features that Nix shs offers in this section we will explore the routing feature offered by Nix shes specifically focusing on the app router next implements a file system based routing mechanism where the URL paths accessible in the browser are defined by files and folders within your code base let's dive into the code code and understand with an example I have opened vs code and as you can see I have created a new next year's project using the command npx create hyphen next hyphen app at latest and the project name is routing hyphen demo once the command is executed you should have a project similar to mine open the project and navigate to The Source folder for a fresh start delete the app folder as we will learn how to create routes in next Shar from scratch now I already mention that Nexes has a file based routing mechanism but does that mean every file in our app corresponds to a route well no if you remember from the intro video I mentioned that nexs is a framework where we need to follow certain conventions routing is one such feature where we have to heavily follow the framework conventions what are those conventions well let's understand with a few different scenarios first all routes must be placed inside the app folder second every file that represents a route should be named page.js or page. TSX depending on whether typescript is used or not third each folder corresponds to a part segment in the browser URL when these conventions are followed the file automatically becomes available as a route for scenario one let's add a route that needs to be rendered when a user visits our website our website is of course localhost 3000 so if the user navigates to Local Host Port 3000 we want to display a message homepage let's head back to vs code and implement this scenario the first important convention you should know is that by default all routes must be placed within a folder called app which will exist within the source folder let's create a new folder called app within Source the second important convention you should know is that every file that corresponds to a route in the browser should be named page. TSX page is a name of the file and TSX is the file extension within the app folder let me create page. TSX in this file I'm going to default export a very simple react component export default function home and we return an each one tag that says homepage the text of course can be anything you want to for example well welcome home and believe it or not we have created our very first route in next shares we can now run the command npm run Dev and when you open Local Host Port 3000 you should see the text welcome home so this is the first point to keep in mind about routing in next shares the page. TSX file within the app folder maps to the root of your domain scenario one has been successfully implemented now before we proceed let's discuss the layout. TSX file although we deleted this file along with the app folder next automatically creates and populates it when we load the root route we will cover layouts in detail in future videos but it is important to be aware of this file being magically created next let's move on to scenario 2 in this scenario we need two additional routes one route to render when the user visits the about page and another to render when the user visits the profile page let's head back to vs code and Define the two new routes in the app folder I'm going to create a another folder about in lowercase within the folder I'm going to define a new page. TSX file in this file I'm going to default export a react component similarly let's create yet another folder in the app folder called profile create a new page. TSX file copy the react component and change about to profile and the text to my profile if you now save both the files and head back to the browser the homepage should still be displayed at the root route however if you navigate to localhost 3000 slab you will see the about me page similarly changing the URL to slash profile will render the my profile page scenario 2 has been implemented therefore the second point to remember is that routes are associated with a file based on the containing folders name within the app folder page. TSX within the about folder Maps toabout while page. TSX within the profile folder Maps to/ profile here is a visualization of what we have learned so far page. TSX within the app folder is the root route and then each folder corresponds to a URL segment now what happens if you enter a URL that cannot map to a file in the app folder for example SL dashboard board well next shs will automatically respond with a 404 not found response you don't have to explicitly handle a non-matching route hopefully the concept of file based routing should now make more sense to you there is no need to install and configure a router with code your file and folder structure determines the routes this represents next year's approach of convention over configuration for routing we still have more to learn about routing so let's continue in the next video thank you for watching and please consider subscribing to the channel for more content on nexts

Channel: Codevolution

Views: 112,422

Keywords: Codevolution, React, Next.js, Next.js 14, Next.js Tutorial, Next.js 14 Tutorial, Next.js Tutorials, Next.js for Beginners, Next.js 14 Tutorials, Next.js 14 Tutorial for Beginners, App Router, Next.js React Server Components, Next.js Routing, Next.js Data Fetching, Routing, Next.js 14 Routing

Id: Vm7qM1wmXwE

Length: 7min 45sec (465 seconds)

Published: Tue Nov 07 2023