Getting Started with Next.js: Part 2 - Creating Pages and Routing

Introduction

Welcome back to our Next.js series! In Part 2, we will delve into creating pages and leveraging the built-in routing system of Next.js. This tutorial builds directly on the initial setup we discussed in Part 1. Today, we will add more pages to our application and explore how to navigate between them using the powerful routing features that Next.js offers.

Step 1: Creating a New Page

One of the highlights of Next.js is its simplicity in creating new pages. Pages in Next.js are React components exported from files within the pages directory, where the file path becomes the URL path.

How to Create a New Page

1. Open Your Project: Ensure you're in your project directory where your Next.js app lives.
2. Navigate to the Pages Directory: This folder is where all your page components (JavaScript files) are stored.

3. Create a New JavaScript File for Your Page:

   • About Page: Create a file named about.js in the pages directory.
   • Add the Following Code:

    function About() {
      return (
        <div>
          <h1>About Us</h1>
          <p>Welcome to our website. Here, you can find information about our mission and team.</p>
        </div>
      );
    }
   
    export default About;
   

   This code defines a simple React component for your About page, which will be accessible at /about on your website.

Step 2: Linking Between Pages

To enable smooth navigation without page reloads, Next.js uses a component called Link from next/link.

Implementing Navigation with the Link Component

1. Edit the Home Page:
   • Go to the pages/index.js.

2. Import the Link Component:

   • Add the import statement at the top of your file:

    import Link from 'next/link';
   

3. Add a Navigation Link:

   • Modify the existing function or component to include a link to the About page:

    function Home() {
      return (
        <div>
          <h1>Welcome to Next.js!</h1>
          <Link href="/about"><a>About Us</a></Link>
        </div>
      );
    }
   
    export default Home;
   

• This modification adds an anchor tag wrapped in a Link component. When clicked, it navigates to the About page without a full page reload, demonstrating the single-page application behavior.

Step 3: Testing Navigation

Now that you've implemented navigation, it's time to test it:

1. Start the Development Server:

   • If not already running, execute:

    npm run dev
   

2. Open Your Browser:

   • Go to http://localhost:3000 to view your Next.js application.

3. Navigate Using Your New Link:

   • Click on the "About Us" link on the homepage. It should take you to the About page seamlessly.

Conclusion

Congratulations! You've successfully added a new page to your Next.js app and implemented client-side navigation. These are foundational skills for building dynamic single-page applications (SPAs) with Next.js.

Stay tuned for Part 3, where we will explore API routes and how to handle server-side data fetching in Next.js.