Lesson Two: Creating Multiple Pages and Linking Them

Introduction

In modern applications, you often need to provide links between different pages within the app. In this lesson, we’ll learn how to create multiple pages in a Next.js project and link them using the Link component.

1. Creating New Pages

In Next.js, every file in the pages/ folder represents a separate page. Let’s create two new pages:

"About" Page

• Open the pages/ folder in your project.
• Create a new file named about.js .
• Add the following code inside the file:

export default function About() {
return (
<div>
<h1>About Us</h1>
<p>This is the about page for the website.</p>
</div>
);
}

"Contact" Page

• Create another file named contact.js inside the pages/ folder.
• Add the following code inside the file:

export default function Contact() {
return (
<div>
<h1>Contact Us</h1>
<p>You can reach us via email or phone.</p>
</div>
);
}

2. Using the Link Component to Navigate Between Pages

To navigate between pages in Next.js, we use the Link component from the next/link library. This component provides an efficient way to navigate without reloading the entire page, making the application faster and more efficient.

Modifying the Homepage (index.js)

Open the pages/index.js file and make the following changes:

import Link from 'next/link';


export default function Home() {
return (
<div>
<h1>Welcome to Our Website!</h1>
<p>Choose a page:</p>
<nav>
<ul>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>Contact Us</a>
</Link>
</li>
</ul>
</nav>
</div>
);
}

Explanation of the Code:

• We imported the Link component from next/link .
• We used the <Link> element to link the pages.
• Inside <Link>, we used the href attribute to specify the path we want to navigate to.
• We used the <a> element inside <Link> to display the clickable text.

3. Running the Project and Testing Navigation

After saving the changes, you can run the project using the following command if it’s not already running:

npm run dev

Open your browser and go to http://localhost:3000 . You will notice that you now have links to the "About" and "Contact" pages. When you click on any of them, you will be taken to the desired page without reloading the entire page.

4. Supporting Dynamic Routes

Next.js also supports dynamic routes , which means you can create pages based on dynamic data. Let’s look at a simple example:

Creating a Dynamic Page

• Open the pages/ folder.
• Create a new folder named products/ .
• Inside the products/ folder, create a file named [id].js .

Note: The filename [id].js indicates that this page is dynamic and receives an id value as part of the route.

Adding Code to [id].js:

export default function Product({ id }) {
return (
<div>
<h1>Product Details</h1>
<p>Product ID: {id}</p>
</div>
);
}


export async function getServerSideProps(context) {
const { id } = context.params; // Get the ID from the route
return {
props: {
id, // Pass the ID to the component
},
};
}

Adding a Link to the Dynamic Page

Modify the index.js file to add a link to the product page:

import Link from 'next/link';


export default function Home() {
return (
<div>
<h1>Welcome to Our Website!</h1>
<p>Choose a page:</p>
<nav>
<ul>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>Contact Us</a>
</Link>
</li>
<li>
<Link href="/products/123">
<a>Product #123</a>
</Link>
</li>
</ul>
</nav>
</div>
);
}

5. Testing the Dynamic Route

Open your browser and go to http://localhost:3000/products/123 . You will see a page displaying product details based on the id.

Conclusion of Lesson Two

In this lesson, you learned how to:

• Create multiple pages in Next.js.
• Use the Link component to navigate between pages.
• Create dynamic routes using files like [id].js.

In the next lesson, we’ll talk about managing styles in Next.js and how to add CSS and design elements to your application.

See you in Lesson Three! 🚀