Adding pages in Next.js

In previous posts we set up the general layout of our app so we can now start adding pages and a navigation bar.

The first page we’ll add is a static ‘about us’ page. Find the pages folder in the Next.js project and create a new file named about.js.

Once you’ve done this your pages folder should look like this:

/public
    /api
        hello.js
    _app.js
    about.js
    index.js

In the about.js file we’ll add a new React component, import our layout which will bring in our existing header and footer, and then add the content for our about page.

import Layout from "../components/layout";

export default function About() {
    return(
        <Layout>
            <h1>About</h1>
            <p>This page is all about me.</p>
        </Layout>
    );
}

In Next.js when a page is created in the pages folder a route is automatically created associated with the file name of the page. In our development environment if we open localhost:3000/about we’ll see the about page that we just added.

Nested routes

What about if we want multiple child pages under our parent ‘about’ route structured something like this?

/about
/about/our-team
/about/history

Next.js lets us do this by nesting files in folders within our pages directory.

Add a folder named about and create two new files called our-team.js and history.js. If you created an about.js file in the previous section, move that file into the /about directory and rename it to index.js. This will be the default file that is loaded when the localhost:3000/about route is accessed.

/pages
    /api
        hello.js
    /about
        history.js
        index.js
        our-team.js
    _app.js
    index.js

We’ll then set up our two new files as simple Next.js pages.

import Layout from "../../components/layout";

export default function History() {
    return(
        <Layout>
            <h1>History</h1>
            <p>This page gives you details about our history.</p>
        </Layout>
    );
}

import Layout from "../../components/layout";

export default function OurTeam() {
    return(
        <Layout>
            <h1>Our Team</h1>
            <p>This page has information about our team.</p>
        </Layout>
    );
}

Now that these three files are in place, you will be able to load /about, /about/our-team and /about/history in the dev environment and see the relevant pages.

Dynamic routes

Another scenario we may have is a number of pages with the same layout but different content. Consider how a blog is set up – each of the pages has the same layout with a header, navigation bar, footer and side bar. It’s only the content that differs between the pages.

Next.js allows us to do this dynamic routing by putting the name of the file in square brackets.

Let’s create a new folder within our pages directory called posts and within that create a new file called [id].js.

import Layout from "../../components/layout";
import { useRouter } from 'next/router';

export default function Post() {
    const router = useRouter();
    const { id } = router.query;

    return (
      <Layout>
        <p>Post ID: {id}</p>
      </Layout>
    )
}

We import useRouter from Next.js which allows us to use dynamic routing and we use it at the top of our component to retrieve a query from our URL and store it in a constant called id. We can then output this constant to our page.

In the dev environment, if you try to load the following URL’s they will output the last part of the path on the page.

localhost:3000/posts/testing
localhost:3000/posts/12345
localhost:3000/posts/hello-world

We will be making use of dynamic routing once we get to importing our pages and posts from WordPress.

As always, more information on pages and routing can be found in the Next.js documentation.