Part 4: Creating Multiple Pages in a Next.js Application: Adding an "About" Page

[Page] Routing and Navigation

[Page] Routing and Navigation

In the world of web development, creating a multi-page application can sometimes seem daunting, especially if you're used to working with single-page applications (SPAs). However, Next.js simplifies this process significantly with its filesystem-based routing. In this blog post, we'll explore how to add an "About" page to your Next.js blog website, making it visible at the "/about" path.

Adding a New Page

We've already seen how Next.js renders our HomePage into a static HTML file. Now, let's add another page, such as an "About" page. If you try accessing "/about" on your current setup, you'll get a 404 error, as this path doesn't exist yet. But fear not, creating a new page in Next.js is straightforward.

Creating the About Page

In a typical React app, you'd use a router library to manage different routes, requiring some configuration. Next.js, however, makes this process much easier. You simply create a new file in the pages directory.

Here's how you can create an "About" page:

1. Navigate to the pages directory in your Next.js app.

2. Create a new file named about.js.

The about.js file will automatically map to the "/about" path because of Next.js's filesystem-based routing.

Writing the About Component

Within about.js, define a React component to display your "About" page content. Here's an example:

// File: pages/about.js
function AboutPage() {
  console.log('[AboutPage] render');
  return (
    <main>
      <h1>About</h1>
    </main>
  );
}

export default AboutPage;

In this code snippet, the AboutPage function is a simple React component that outputs an <h1> element with the text "About". The console.log statement is optional but can be helpful for debugging to see when the component is rendered.

Accessing the About Page

After saving the about.js file, simply navigate to "/about" in your browser. You'll see the new "About" page displayed. It's that simple—no additional configuration required.

Understanding Filesystem-Based Routing

The magic of Next.js's routing lies in its filesystem-based approach. The Next.js server automatically maps each file in the pages directory to a corresponding URL path. Here's how it works:

• The about.js file is automatically accessible at the "/about" path.

• The index.js file is a special case mapped to the root path ("/"). This is intuitive as it serves as the homepage of your site.

This system means that any JavaScript file you add to the pages directory becomes a new page on your website, with the file name (minus the extension) serving as the URL path.

Conclusion

Next.js makes creating multi-page applications incredibly straightforward with its filesystem-based routing. By simply adding files to the pages directory, you can quickly expand your website with new routes and content. Try creating additional pages to further explore the capabilities of Next.js and see how easy it is to build robust, scalable web applications. This simplicity allows developers to focus more on creating content and features rather than managing complex routing configurations.