Next.js 14 Tutorial - 5 - Routing
Summary
TLDRThis 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
🚀 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'.
🌐 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.
Mindmap
Keywords
💡Nix
💡Next.js
💡Routing
💡App Router
💡File System-Based Routing
💡Page Component
💡Convention Over Configuration
💡404 Not Found Response
💡VS Code
💡TypeScript
💡Layout Component
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
Посмотреть больше похожих видео
5.0 / 5 (0 votes)