Getting Started with Next.js: Part 2 - Creating Pages and Routing
Tags: nextjs, javascript, beginners, learning
Published: 2024-04-28 07:09:06

## 🚀 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](https://www.youtube.com/@DevDivewithDipak). 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**:
     ```javascript
     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:
     ```javascript
     import Link from 'next/link';
     ```
3. **Add a Navigation Link**:
   - Modify the existing function or component to include a link to the About page:
     ```javascript
     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:
     ```bash
     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.