Pages and Routing Oh MY! A Next.JS Tour

Adding Pages to Your Next.js App

Adding pages to a Next app with fairly simple. If we recall the directory structure from our first post on this it looked something like this:

➜ lsl
drwxr-xr-x    - chris 28 Sep 23:38 components
drwxr-xr-x    - chris 28 Sep 23:38 node_modules
.rw-r--r--  262 chris 28 Sep 23:38 package.json
drwxr-xr-x    - chris 28 Sep 23:38 pages
drwxr-xr-x    - chris 28 Sep 23:38 static
.rw-r--r-- 238k chris 28 Sep 23:38 yarn.lock

The relevant part of this for creating pages is… The pages directory. In Next, if we add a component into the pages directory with a default export, it will automatically create a route for that in our project. Let us go ahead and create our first new page in the project. We’ll start with an about page, so we will generate pages/about.js and add the following code:

import React from 'react';
import Nav from '../components/nav';

const About = () => (
	<>
		<Nav />
		<h3>About</h3>
		<p>
			Dolor veniam quidem debitis sequi corporis eveniet? Veniam delectus porro doloremque eos
			similique. Cumque laudantium mollitia aspernatur amet ipsam! Consequuntur.
		</p>
	</>
);

export default About;

Easy right? We created a pretty standard functional component that returned JSX as we would in any React component, and now when we run yarn dev and go to localhost:3000/about, we can see the component we just created has its route and page. Next has a bit of magic in this area as all we’re doing is dropping in components, and pages are automatically created and rendered for use on the server side.