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

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

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;
}

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

Hint

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

Practice

1. What is the main benefit of file-based routing in Next.js?

easy

A. It only works with static HTML files, not React components.

B. It automatically creates routes based on files in the pages folder.

C. It requires manual configuration of each route in a separate file.

D. It disables dynamic URL parameters for pages.

Solution

1. Step 1: Understand file-based routing concept

   File-based routing means Next.js uses the file names in the pages folder to create website routes automatically.

2. Step 2: Compare options with this concept

   It automatically creates routes based on files in the pages folder. matches this idea exactly. Options A, B, and D contradict the automatic and dynamic nature of file-based routing.

3. Final Answer:

   It automatically creates routes based on files in the pages folder. -> Option B

4. Quick Check:

   File-based routing = automatic routes [OK]

Hint: File names equal routes in Next.js [OK]

Common Mistakes:

• Thinking routes need manual setup
• Confusing static files with React components
• Believing dynamic URLs are not supported

2. Which file name correctly creates a dynamic route for a user profile page in Next.js?

easy

A. userId.js

B. profile.js

C. user-profile.jsx

D. [userId].js

Solution

1. Step 1: Identify dynamic route syntax in Next.js

   Dynamic routes use square brackets around the parameter name, like [param].js.

2. Step 2: Match options to this syntax

   Only [userId].js uses square brackets correctly to create a dynamic route for userId.

3. Final Answer:

   [userId].js -> Option D

4. Quick Check:

   Dynamic route syntax = [param].js [OK]

Hint: Dynamic routes use [param].js file names [OK]

Common Mistakes:

• Using plain file names without brackets
• Confusing file extensions
• Missing brackets around parameter

3. Given these files in the pages folder: index.js, about.js, [postId].js, what URL paths will Next.js automatically create?

medium

A. /, /about, /:postId (dynamic route)

B. /index, /about, /[postId]

C. /, /about, /postId

D. /home, /about-us, /post

Solution

1. Step 1: Understand file to route mapping

   index.js maps to root '/', about.js maps to '/about', and [postId].js creates a dynamic route '/:postId'.

2. Step 2: Evaluate options for correct paths

   /, /about, /:postId (dynamic route) correctly shows '/' for index, '/about' for about.js, and dynamic '/:postId' for [postId].js. Others are incorrect or literal.

3. Final Answer:

   /, /about, /:postId (dynamic route) -> Option A

4. Quick Check:

   File names map to routes including dynamic [param] [OK]

Hint: index.js = /, [param].js = dynamic route [OK]

Common Mistakes:

• Confusing index.js with /index path
• Treating dynamic routes as literal strings
• Assuming file names map exactly without dynamic syntax

4. You created a file named user.js inside the pages folder to handle user profiles, but navigating to /123 shows a 404 error. What is the likely problem?

medium

A. Next.js does not support nested routes.

B. The file extension must be .jsx, not .js.

C. The file should be named [userId].js to handle dynamic user IDs.

D. You need to add a route manually in a config file.

Solution

1. Step 1: Understand dynamic route handling

   To handle URLs like /123, the file must use dynamic routing syntax with brackets, e.g., [userId].js.

2. Step 2: Check options for correct fix

   The file should be named [userId].js to handle dynamic user IDs. correctly identifies the need for a dynamic route file name. Options A, B, and C are incorrect because Next.js supports .js files, automatic routing, and nested routes.

3. Final Answer:

   The file should be named [userId].js to handle dynamic user IDs. -> Option C

4. Quick Check:

   Dynamic routes need [param].js file names [OK]

Hint: Use [param].js for dynamic URLs [OK]

Common Mistakes:

• Using static file names for dynamic URLs
• Thinking manual route config is needed
• Confusing file extensions

5. You want to create a blog with categories and posts using file-based routing. Which folder and file structure correctly supports URLs like /blog/technology/123 where technology is a category and 123 is a post ID?

hard

A. /pages/blog/[category]/[postId].js

B. /pages/blog/category/postId.js

C. /pages/blog/[category-postId].js

D. /pages/blog/category/[postId].js

Solution

1. Step 1: Understand nested dynamic routes

   To handle URLs with multiple dynamic parts, Next.js uses nested folders with bracketed file names for each parameter.

2. Step 2: Match structure to URL pattern

   /pages/blog/[category]/[postId].js uses nested folders with [category] and [postId].js, matching /blog/technology/123 correctly. Other options do not match dynamic nesting properly.

3. Final Answer:

   /pages/blog/[category]/[postId].js -> Option A

4. Quick Check:

   Nested dynamic folders = nested URL params [OK]

Hint: Use nested [param] folders for multi-level dynamic routes [OK]

Common Mistakes:

• Putting multiple params in one file name
• Using static folder names for dynamic parts
• Not nesting folders for URL segments