Routing
Learn how to create routes and navigate to different pages in our application.
We'll cover the following
What is routing?
Routing is one of the fundamentals of Next.js. It’s also one of the things that Next.js provides out of the box. Let’s take a look at how we can create and manage new routes in our Next.js applications.
Creating pages
We know that the /pages
folder of a Next.js application is where all our pages exist. Next.js automatically creates a route for all the files present in the /pages
directory. Both the files and folders are mapped to routes in our applications. A few key things to note are:
The
index.js
file is mapped to/
for each folder. For example:/pages/index.js
is mapped to/
./pages/collections/index.js
is mapped to/collections
.
The route created for a file has the same name as the file. For example:
/pages/about.js
is mapped to/about
./pages/collections/collection1.js
is mapped to/collections/collection1
.
Next.js comes with a default 404 Not Found page. Any path that does not have a corresponding file will show this 404 page.
Let's test this out in the code widget below. We've already placed some files in the /pages
folder. We can navigate to them by appending their path to the end of the URL.
Get hands-on with 1200+ tech skills courses.