Routing System

Next.js routing:

If you’re coming from client-side React, you might be familiar with libraries such as React Router, Reach Router, or Wouter. They allow us to create client-side routes only, meaning that all the pages will be created and rendered on the client side; no SSR is involved.

Next.js uses a different approach: filesystem-based pages and routes. A default Next.js project ships with a pages/ directory. Every file inside that folder represents a new page or route for our application.

Therefore, when talking about a page, we refer to a React component exported from any of the .js, .jsx, .ts, or .tsx files inside the pages/ folder.

To make things a bit clearer, let’s say that we want to create a simple website with just two pages; the first one will be the home page, while the second one will be a simple contact page. To do that, we’ll only need to create two new files inside our pages/ folder: index.js and contacts.js. Both files will need to export a function returning some JSX content; it will be rendered on the server side and sent to the browser as standard HTML.

As we’ve just seen, a page must return valid JSX code, so let’s make a very simple and concise index.js page:

Click the “Run” button below to execute the code. Once it has finished execution, you can view the output using the link provided.