Routing System
Explore Next.js routing by understanding filesystem-based pages and dynamic routes. Learn how to create static and dynamic routes, use route variables to render unique content, and utilize the useRouter hook within components. This lesson equips you to build highly dynamic Next.js applications with flexible navigation structures.
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, ...