Why file-based routing simplifies navigation in NextJS - See It in Action

Why file-based routing simplifies navigation

📖 Scenario: You are building a simple website with multiple pages using Next.js. You want to understand how Next.js uses file-based routing to make navigation easy without manually setting up routes.

🎯 Goal: Create a Next.js app with three pages: Home, About, and Contact. Use file-based routing by creating files in the app directory. Add links to navigate between these pages.

📋 What You'll Learn

Create three page files named page.tsx inside app/, app/about/, and app/contact/

Each page should export a React functional component that returns a heading with the page name

Add navigation links on the Home page to the About and Contact pages using Next.js Link component

Use the Next.js App Router conventions for file-based routing

💡 Why This Matters

🌍 Real World

Most modern web apps need multiple pages and smooth navigation. File-based routing lets developers create pages by just adding files, speeding up development.

💼 Career

Understanding Next.js file-based routing is essential for frontend developers working with React frameworks to build scalable and maintainable web applications.

1

Create the Home page component

Create a file app/page.tsx with a React functional component named HomePage that returns an <h1> with the text Home Page.

NextJS

// Your code here to create HomePage component in app/page.tsx

Need a hint?

Use export default function HomePage() and return <h1>Home Page</h1>.

2

Create About and Contact page components

Create two files: app/about/page.tsx and app/contact/page.tsx. Each should export a React functional component named AboutPage and ContactPage respectively. Each component returns an <h1> with the text About Page and Contact Page respectively.

NextJS

import React from 'react';

export default function HomePage() {
  return Home Page;
}

// Your code here to create AboutPage in app/about/page.tsx and ContactPage in app/contact/page.tsx

Need a hint?

Create two components named AboutPage and ContactPage each returning an <h1> with the correct text.

3

Add navigation links on the Home page

In app/page.tsx, import Link from next/link. Inside the HomePage component, below the <h1>, add two <Link> components linking to /about and /contact with link texts About and Contact.

NextJS

import React from 'react';
// Your code here to import Link from 'next/link'

export default function HomePage() {
  return (
    
      Home Page
      {/* Add Link components here to /about and /contact */}
    
  );
}

// app/about/page.tsx
export function AboutPage() {
  return About Page;
}

// app/contact/page.tsx
export function ContactPage() {
  return Contact Page;
}

Need a hint?

Import Link from next/link and use it to create navigation links inside the HomePage component.

4

Complete the file-based routing setup

Ensure the files are placed correctly: app/page.tsx for Home, app/about/page.tsx for About, and app/contact/page.tsx for Contact. Confirm each page exports a default React component or named export as appropriate for Next.js App Router. This completes the file-based routing setup.

NextJS

// Verify file placement and exports are correct for file-based routing
// Your code here if needed

Need a hint?

Change AboutPage and ContactPage to be default exports to match Next.js App Router expectations.