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

🚀 Check Out My YouTube Channel! 🚀

Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel devDive with Dipak. I post practical full-stack development videos that complement my blog posts. Your support means a lot!

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.

Series Index

Part	Title	Link
1	Getting Started with Next.js: Setting Up Your Project	Read Part 1
2	Next.js: Creating Pages and Routing	Read Part 2
3	Next.js: API Routes	Read Part 3
4	Next.js: Server-Side Rendering (SSR)	Read Part 4
5	Next.js: Static Site Generation and ISR	Read Part 5
6	Next.js: Advanced Configuration and Optimization	Read Part 6
7	Next.js: Internationalization and Localization	Read Part 7
8	Next.js: State Management and API Integration	Read Part 8

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

Comments

[Dipak Ahirav]

Next part is here : PART - 3