Routing system
If you're coming from client-side React, you might be familiar with libraries such as React Router, Reach Router, or Wouter. They allow you to create client-side routes only, meaning that all the pages will be created and rendered on the client side; no server-side rendering is involved.
Next.js uses a different approach: filesystem-based pages and routes. As seen in Chapter 2, Exploring Different Rendering Strategies, a default Next.js project ships with a pages/ directory. Every file inside that folder represents a new page/route for your 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 will only need to create two new files inside our...