Routing System
Learn about the navigation, route variables, and accessing them with the useRouter hook.
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.
Get hands-on with 1200+ tech skills courses.