App directory (App Router) in NextJS - Mini Project: Build & Apply

Build a Simple Next.js App Using the App Directory (App Router)

📖 Scenario: You are creating a small website homepage using Next.js with the new App Router feature. This new way organizes pages inside the app folder instead of the old pages folder.The website will show a welcome message and a list of three favorite fruits.

🎯 Goal: Build a Next.js app using the app directory. Create a homepage that displays a heading and a list of fruits using React components and the App Router conventions.

📋 What You'll Learn

Create an app folder with a page.tsx file

Define a React functional component named HomePage inside page.tsx

Use a constant array fruits with exactly these strings: "Apple", "Banana", "Cherry"

Render a heading <h1> with the text "Welcome to My Fruit Site"

Render an unordered list <ul> showing each fruit from the fruits array as a list item <li>

Export the HomePage component as the default export

💡 Why This Matters

🌍 Real World

Next.js App Router is the modern way to build React apps with file-based routing and server components, used in many professional web projects.

💼 Career

Understanding the app directory and how to create pages with React components is essential for frontend developers working with Next.js in real-world jobs.

1

Create the fruits array

Inside the app/page.tsx file, create a constant array called fruits with these exact strings: "Apple", "Banana", and "Cherry".

NextJS

# Your code here

Hint

Use const fruits = ["Apple", "Banana", "Cherry"] to create the array.

2

Create the HomePage component

Add a React functional component named HomePage that returns a fragment with an <h1> heading containing the text "Welcome to My Fruit Site".

NextJS

const fruits = ["Apple", "Banana", "Cherry"]

// Your code here

Hint

Define function HomePage() { return ( ... ) } and inside return an <h1> with the welcome text.

3

Render the fruits list inside HomePage

Inside the HomePage component's return, add an unordered list <ul>. Use fruits.map with fruit as the iterator variable to create a list item <li> for each fruit. Each <li> should have a key attribute set to the fruit string.

NextJS

const fruits = ["Apple", "Banana", "Cherry"]

function HomePage() {
  return (
    
      Welcome to My Fruit Site
      {/* Your code here to add the fruits list */}
    
  )
}

Hint

Use {fruits.map(fruit => (<li key={fruit}>{fruit}</li>))} inside the <ul>.

4

Export the HomePage component as default

Add a default export statement for the HomePage component at the end of page.tsx.

NextJS

const fruits = ["Apple", "Banana", "Cherry"]

function HomePage() {
  return (
    
      Welcome to My Fruit Site
      
        {fruits.map(fruit => (
          {fruit}
        ))}
      
    
  )
}

// Your code here to export HomePage as default

Hint

Write export default HomePage at the end of the file.

Practice

1. In Next.js App Router, what does a folder containing a page.js file represent?

easy

A. A route in the application

B. A layout wrapper for pages

C. A server API endpoint

D. A static asset folder

Solution

1. Step 1: Understand the role of page.js in App Router

   In Next.js App Router, each folder with a page.js file defines a route that users can visit.

2. Step 2: Differentiate from other files

   Files like layout.js define layouts, not routes. API routes are in api/ folders, and static assets are in public/.

3. Final Answer:

   A route in the application -> Option A

4. Quick Check:

   Folder + page.js = route [OK]

Hint: Folder with page.js always means a route [OK]

Common Mistakes:

• Confusing layout.js with page.js
• Thinking page.js is for API routes
• Assuming static assets are routes

2. Which of the following is the correct way to define a layout in the Next.js App Router?

easy

A. Create a layout.js file inside the route folder

B. Create a page.js file inside the route folder

C. Create a _app.js file in the root folder

D. Create a server.js file in the route folder

Solution

1. Step 1: Identify layout file naming in App Router

   Layouts are defined by creating a layout.js file inside the folder representing the route.

2. Step 2: Exclude old or unrelated files

   The _app.js file is used in the old pages router, not App Router. page.js defines pages, not layouts. server.js is unrelated.

3. Final Answer:

   Create a layout.js file inside the route folder -> Option A

4. Quick Check:

   layout.js = layout file [OK]

Hint: Layouts use layout.js, not page.js or _app.js [OK]

Common Mistakes:

• Using _app.js instead of layout.js
• Confusing page.js with layout.js
• Trying to define layout in server.js

3. Given this folder structure in the app/ directory:

app/
  layout.js
  page.js
  dashboard/
    layout.js
    page.js

What happens when a user visits /dashboard?

medium

A. Only the root layout wraps the dashboard page, dashboard layout is ignored

B. Only the dashboard layout wraps the dashboard page, root layout is ignored

C. The root layout wraps the dashboard layout, which wraps the dashboard page

D. No layout is applied, only the dashboard page renders

Solution

1. Step 1: Understand nested layouts in App Router

   Layouts in parent folders wrap layouts and pages in child folders. So root layout wraps dashboard layout, which wraps dashboard page.

2. Step 2: Confirm layout application order

   Visiting /dashboard applies root layout first, then dashboard layout, then renders dashboard page inside.

3. Final Answer:

   The root layout wraps the dashboard layout, which wraps the dashboard page -> Option C

4. Quick Check:

   Layouts nest from root to child [OK]

Hint: Layouts nest from parent to child folders [OK]

Common Mistakes:

• Thinking only one layout applies
• Ignoring root layout when inside subfolder
• Assuming layouts do not nest

4. You wrote this code in app/dashboard/page.js:

export default function DashboardPage() {
  return 
Dashboard
}

But when you visit /dashboard, you get a blank page. What is the most likely cause?

medium

A. The page.js file must be named index.js

B. The DashboardPage component must be a class component

C. You forgot to export the component as default

D. Missing layout.js in app/ folder

Solution

1. Step 1: Verify root layout presence

   In Next.js App Router, a root layout.js file in the app/ directory is required to render any pages, including nested ones.

2. Step 2: Confirm naming and export correctness

   The page.js file name is correct, and the component is exported as default. Class components are not required.

3. Final Answer:

   Missing layout.js in app/ folder -> Option D

4. Quick Check:

   Root layout required for all pages [OK]

Hint: Root layout.js required for nested pages [OK]

Common Mistakes:

• Renaming page.js to index.js incorrectly
• Forgetting default export
• Thinking class components are required

5. You want to create a nested route /blog/[slug] using the App Router. Which folder and file structure is correct?

hard

A. app/blog/_slug/page.js

B. app/blog/[slug]/page.js

C. app/blog/slug/page.js

D. app/blog/[slug].js

Solution

1. Step 1: Understand dynamic route syntax in App Router

   Dynamic routes use square brackets around the parameter name as folder names, e.g., [slug].

2. Step 2: Confirm correct file placement

   The dynamic folder [slug] contains a page.js file to render the dynamic route. Other options use incorrect naming or file placement.

3. Final Answer:

   app/blog/[slug]/page.js -> Option B

4. Quick Check:

   Dynamic routes use [param] folder with page.js [OK]

Hint: Dynamic routes use [param] folders with page.js inside [OK]

Common Mistakes:

• Using _slug instead of [slug]
• Placing dynamic param in filename instead of folder
• Omitting page.js inside dynamic folder