Static rendering (default) in NextJS - Mini Project: Build & Apply

Static Rendering with Next.js

📖 Scenario: You are building a simple Next.js website to show a list of favorite fruits. The list is fixed and does not change often.This means you can use static rendering to generate the page once when building the site, so it loads very fast for visitors.

🎯 Goal: Create a Next.js page that statically renders a list of fruits using the default static rendering method.The page should show a heading and an unordered list of fruit names.

📋 What You'll Learn

Create a constant array called fruits with the exact values: 'Apple', 'Banana', 'Cherry'

Create a React functional component called FruitList that returns JSX

Use the fruits array inside the component to render an unordered list (<ul>) with each fruit as a list item (<li>)

Export the FruitList component as the default export of the page

💡 Why This Matters

🌍 Real World

Static rendering is used for pages that do not change often, like blogs, marketing pages, or product lists, to make them load very fast for users.

💼 Career

Understanding static rendering in Next.js is essential for frontend developers building fast, SEO-friendly websites.

1

Create the fruits array

Create a constant array called fruits with these exact string values: 'Apple', 'Banana', and 'Cherry'.

NextJS

# Your code here

Need a hint?

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

2

Create the FruitList component

Create a React functional component called FruitList that returns a <div> containing a heading <h1> with the text 'My Favorite Fruits'.

NextJS

const fruits = ['Apple', 'Banana', 'Cherry'];

// Your code here

Need a hint?

Define function FruitList() { return ( ... ); } and include the heading inside the returned JSX.

3

Render the fruits list inside FruitList

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

NextJS

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    
      My Favorite Fruits
      {/* Your code here to add the list */}
    
  );
}

Need a hint?

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

4

Export the FruitList component as default

Add a default export statement for the FruitList component at the end of the file using export default FruitList;.

NextJS

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    
      My Favorite Fruits
      
        {fruits.map(fruit => (
          {fruit}
        ))}
      
    
  );
}

// Your code here to export the component

Need a hint?

Write export default FruitList; at the end of the file.