Routing

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.