Nested routes with folders in NextJS - Mini Project: Build & Apply

Nested routes with folders

📖 Scenario: You are building a simple website with multiple pages organized in folders to create nested routes.This helps visitors navigate easily and keeps your code neat.

🎯 Goal: Create nested routes in a Next.js app using folders inside the app directory.Build a homepage, an about page inside an about folder, and a contact page inside a contact folder.

📋 What You'll Learn

Create a homepage at app/page.tsx with a heading 'Home Page'.

Create an about folder inside app with a page.tsx file showing heading 'About Us'.

Create a contact folder inside app with a page.tsx file showing heading 'Contact Us'.

Use React functional components with default exports for each page.

💡 Why This Matters

🌍 Real World

Websites often have multiple pages grouped by topic or function. Using nested folders for routes keeps code organized and URLs user-friendly.

💼 Career

Understanding Next.js routing and folder structure is essential for building scalable React applications and working in modern web development teams.

1

Create the homepage component

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

NextJS

// Create the HomePage component in app/page.tsx
// Your code here

Need a hint?

Use export default function HomePage() { return <h1>Home Page</h1>; }

2

Add the About page in a folder

Inside the app folder, create a new folder named about. Inside about, create a file page.tsx with a React functional component named AboutPage that returns an <h1> with the text 'About Us'. Export it as default.

NextJS

// Create AboutPage component in app/about/page.tsx
// Your code here

Need a hint?

Create app/about/page.tsx with export default function AboutPage() { return <h1>About Us</h1>; }

3

Add the Contact page in a folder

Inside the app folder, create a new folder named contact. Inside contact, create a file page.tsx with a React functional component named ContactPage that returns an <h1> with the text 'Contact Us'. Export it as default.

NextJS

// Create ContactPage component in app/contact/page.tsx
// Your code here

Need a hint?

Create app/contact/page.tsx with export default function ContactPage() { return <h1>Contact Us</h1>; }

4

Verify folder structure and exports

Ensure your app folder has page.tsx for the homepage, and inside app/about and app/contact folders, each has a page.tsx exporting the correct component. Confirm all components are default exports.

NextJS

// Verify folder structure and default exports
// Your code here

Need a hint?

Check that all three components are default exported and located in correct folders.