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

Need a 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

Need a 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 */}
    
  )
}

Need a 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

Need a hint?

Write export default HomePage at the end of the file.