Next.js 14 Tutorial - 5 - Routing

Summary

This tutorial introduces the file system-based routing mechanism in Next.js, a popular React framework. It explains the conventions required for creating routes, such as placing them within an 'app' folder and naming them 'page.js' or 'page.tsx'. The video demonstrates how to set up the root route and additional routes using simple React components. It also covers how Next.js automatically handles 404 errors for non-matching routes, showcasing the framework's convention-over-configuration approach to routing.

Takeaways

• 😀 Creating a new Next.js project can be done using the command `npx create-next-app`.
• 📂 The routing in Next.js is file-system based, meaning URLs are defined by the file and folder structure within the project.
• 📁 All routes must be placed inside an `app` folder, which is located within the `src` directory.
• 🔑 Each file representing a route should be named `page.js` or `page.tsx`, depending on whether TypeScript is used.
• 🏠 The `page.tsx` file within the `app` folder automatically maps to the root of the domain, such as `localhost:3000`.
• 🔍 Each folder within the `app` directory corresponds to a segment in the browser's URL, and files within these folders define the routes for those segments.
• 🛑 If a URL does not match any file in the `app` folder, Next.js automatically responds with a 404 Not Found error.
• 🎨 Customizing routes involves creating new folders within the `app` directory and adding `page.tsx` files with React components.
• 🔄 The `_layout.tsx` file is automatically created by Next.js when the root route is loaded, though it was initially deleted in the script.
• 📝 Following Next.js conventions is crucial for routing to work correctly, emphasizing the framework's 'convention over configuration' philosophy.
• 🔍 Understanding file-based routing simplifies the process of setting up routes, as there is no need for explicit router configuration with code.

Q & A

What is the primary feature of Next.js that the script discusses?

The script primarily discusses the file system-based routing feature offered by Next.js.

What command is used to create a new Next.js project?

The command used to create a new Next.js project is 'npx create-next-app'.

What is the role of the 'app' folder in Next.js routing?

The 'app' folder is where all the routes must be placed in Next.js, and it is a convention to follow for file-based routing.

What should be the naming convention for files representing routes in the 'app' folder?

Files representing routes should be named 'page.js' or 'page.tsx' depending on whether JavaScript or TypeScript is used.

How does Next.js handle the root route of a domain?

Next.js maps the 'page.tsx' file within the 'app' folder to the root of the domain.

What happens when a user navigates to a URL that does not correspond to a file in the 'app' folder?

Next.js automatically responds with a 404 Not Found response if the URL does not map to a file in the 'app' folder.

What is the main advantage of Next.js over traditional React applications?

The main advantage of Next.js over traditional React applications is the built-in support for server-side rendering, which can improve performance and SEO.

Outlines

00:00

🚀 Introduction to Nix's File-Based Routing Mechanism

The video begins by explaining the file-based routing mechanism offered by Nix, focusing on the app router. It describes how URL paths are defined by files and folders within the code base. The video walks through creating a new Next.js project using the command 'npx create-next-app@latest' and setting up the project structure. It emphasizes the importance of the 'app' folder and the naming conventions for route files, specifically 'page.js' or 'page.tsx'. The example demonstrates creating a simple route that displays a 'welcome home' message when navigating to 'localhost:3000'.

05:02

🌐 Creating Additional Routes and Understanding Conventions

The second part of the video covers creating additional routes for an 'About' page and a 'Profile' page. It explains the conventions that each folder in the 'app' directory corresponds to a URL segment, and each route file should be named 'page.tsx'. The process involves creating folders named 'about' and 'profile' within the 'app' folder and adding 'page.tsx' files with respective React components. The video shows how navigating to 'localhost:3000/about' and 'localhost:3000/profile' displays the respective pages. It also touches on the automatic handling of non-matching routes by Next.js, resulting in a 404 response.

Keywords

💡Nix

Nix is a package manager for Linux and Unix systems that focuses on reproducible builds and easy rollbacks. In the context of the video, 'Nix' is a likely misspelling or mispronunciation of 'Next.js', which is a popular JavaScript framework for building user interfaces and web applications. The video discusses the routing feature of Next.js, showing how it simplifies the creation and management of web application routes.

💡Next.js

Next.js is a JavaScript framework for building user interfaces and web applications. It is known for its server-side rendering capabilities and ease of use. The video script refers to Next.js as 'Nix shes', which seems to be a mispronunciation or typo. The main theme of the video is to demonstrate how to use Next.js's file system-based routing mechanism.

💡Routing

Routing is a fundamental concept in web development that refers to the process of determining how URLs are mapped to the code that generates the content for a website. In the video, the routing feature of Next.js is explored, specifically how it uses a file system-based approach where URL paths are defined by files and folders in the project's codebase.

💡App Router

The app router in Next.js is a file system-based routing mechanism that allows developers to define routes based on the file and folder structure within the 'app' directory of a Next.js project. The video explains how this router works and how it simplifies the process of creating and managing routes in a Next.js application.

💡File System-Based Routing

File system-based routing is a routing strategy used by Next.js where the URL paths are derived from the file and folder names within the 'app' directory. This approach eliminates the need for explicit route configuration and adheres to the 'convention over configuration' philosophy. The video provides an example of how to implement this type of routing in a Next.js project.

💡Page Component

In Next.js, a page component is a React component that is automatically associated with a route based on its file name and location within the 'app' directory. The video script mentions creating 'page.tsx' files to define routes, such as '/page.tsx' for the homepage and '/about/page.tsx' for the about page.

💡Convention Over Configuration

Convention over configuration is a design philosophy where the software makes reasonable assumptions about the user's intentions based on established conventions, reducing the need for explicit configuration. Next.js follows this philosophy in its routing system, as demonstrated in the video by the automatic creation of routes based on file and folder names.

💡404 Not Found Response

A 404 Not Found response is an HTTP status code indicating that the requested resource could not be found on the server. In the context of the video, it is mentioned that if a URL does not correspond to a file in the 'app' folder, Next.js will automatically return a 404 response, which simplifies error handling for non-matching routes.

💡VS Code

VS Code, or Visual Studio Code, is a popular source code editor developed by Microsoft. The video script includes instructions on how to use VS Code to create and manage a Next.js project, navigate the project structure, and implement file system-based routing.

💡TypeScript

TypeScript is a superset of JavaScript that adds optional static types, classes, and interfaces to the language. In the video, it is mentioned that the page files can be named 'page.js' or 'page.tsx', with the latter being used when TypeScript is employed in the project for added type safety and development tooling support.

💡Layout Component

In Next.js, a layout component is a special component that can be used to wrap page components and provide shared layout functionality across multiple pages. Although not the main focus of the video, the script mentions 'layout.tsx' as a file that Next.js automatically creates and populates when the root route is loaded.

Highlights

Introduction to creating a new Next.js project and understanding its structure.

Exploration of the routing feature in Next.js, focusing on the app router and file system-based routing.

Explanation of how URL paths in the browser are defined by files and folders within the codebase.

Demonstration of creating a new Next.js project using the command 'npx create-next-app'.

The necessity to follow certain conventions for routing in Next.js, emphasizing framework adherence.

Conventions include placing all routes within the 'app' folder and naming route files 'page.js' or 'page.tsx'.

Each folder within the 'app' folder corresponds to a URL segment, automatically creating routes.

Creating a root route that displays a 'Homepage' message when a user visits the website's root URL.

How to implement the root route by creating a 'page.tsx' file within the 'app' folder.

Running 'npm run dev' to see the root route in action at 'localhost:3000'.

Introduction of 'layout.tsx' and its automatic creation by Next.js for the root route.

Creating additional routes for 'About' and 'Profile' pages within the 'app' folder.

Defining routes by creating 'page.tsx' files in corresponding folders like 'about' and 'profile'.

How navigating to 'localhost:3000/about' and 'localhost:3000/profile' renders respective pages.

Understanding that routes are associated with files based on their containing folder's name within 'app'.

Automatic 404 Not Found response by Next.js for URLs that do not map to a file in the 'app' folder.

Emphasis on Next.js's approach of convention over configuration for routing, simplifying the process.

Invitation to continue learning about routing in Next.js in the next video of the series.

Transcripts

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