Why optimization matters for performance in NextJS - See It in Action

Why optimization matters for performance

📖 Scenario: You are building a simple Next.js app that shows a list of products. The list is long, so loading all products at once can make the page slow. You want to learn how to optimize the app to improve performance.

🎯 Goal: Create a Next.js component that loads a list of products and then optimize it by limiting how many products show at once. This will help the page load faster and feel smoother.

📋 What You'll Learn

Create a list of 10 products with exact names and prices

Add a variable to limit how many products show on the page

Use array slicing to show only the limited number of products

Add a button to load more products when clicked

💡 Why This Matters

🌍 Real World

Many websites have long lists of items like products, posts, or comments. Showing all at once can make pages slow. Loading items in smaller chunks helps pages load faster and feel smoother.

💼 Career

Web developers often optimize apps to improve speed and user experience. Knowing how to limit data shown and load more on demand is a key skill for building fast, user-friendly web apps.

1

Create the product list

Create a constant called products that is an array of objects. Each object must have name and price properties. Use these exact products: { name: 'Shoes', price: 50 }, { name: 'Hat', price: 20 }, { name: 'Jacket', price: 100 }, { name: 'Socks', price: 5 }, { name: 'T-shirt', price: 15 }, { name: 'Jeans', price: 40 }, { name: 'Belt', price: 10 }, { name: 'Watch', price: 80 }, { name: 'Sunglasses', price: 60 }, { name: 'Backpack', price: 70 }.

NextJS

// Create the products array with 10 product objects
// Your code here

Need a hint?

Use const products = [ ... ] with objects inside square brackets.

2

Add a limit variable

Create a constant called limit and set it to 3. This will control how many products show at once.

NextJS

const products = [
  { name: 'Shoes', price: 50 },
  { name: 'Hat', price: 20 },
  { name: 'Jacket', price: 100 },
  { name: 'Socks', price: 5 },
  { name: 'T-shirt', price: 15 },
  { name: 'Jeans', price: 40 },
  { name: 'Belt', price: 10 },
  { name: 'Watch', price: 80 },
  { name: 'Sunglasses', price: 60 },
  { name: 'Backpack', price: 70 }
];

// Create a constant called limit and set it to 3
// Your code here

Need a hint?

Use const limit = 3; to set the limit.

3

Show limited products using slice

Create a constant called visibleProducts that uses products.slice(0, limit) to get only the first limit products.

NextJS

const products = [
  { name: 'Shoes', price: 50 },
  { name: 'Hat', price: 20 },
  { name: 'Jacket', price: 100 },
  { name: 'Socks', price: 5 },
  { name: 'T-shirt', price: 15 },
  { name: 'Jeans', price: 40 },
  { name: 'Belt', price: 10 },
  { name: 'Watch', price: 80 },
  { name: 'Sunglasses', price: 60 },
  { name: 'Backpack', price: 70 }
];

const limit = 3;

// Create visibleProducts by slicing products from 0 to limit
// Your code here

Need a hint?

Use products.slice(0, limit) to get the first few products.

4

Add a button to load more products

Create a React functional component called ProductList. Use useState to store limit starting at 3. Render the products sliced by limit. Add a button with onClick that increases limit by 3 to show more products when clicked.

NextJS

import React, { useState } from 'react';

const products = [
  { name: 'Shoes', price: 50 },
  { name: 'Hat', price: 20 },
  { name: 'Jacket', price: 100 },
  { name: 'Socks', price: 5 },
  { name: 'T-shirt', price: 15 },
  { name: 'Jeans', price: 40 },
  { name: 'Belt', price: 10 },
  { name: 'Watch', price: 80 },
  { name: 'Sunglasses', price: 60 },
  { name: 'Backpack', price: 70 }
];

// Create ProductList component with useState for limit starting at 3
// Render products sliced by limit
// Add a button that increases limit by 3 on click
// Your code here

Need a hint?

Use useState to store limit. Render products sliced by limit. Add a button with onClick that calls setLimit(limit + 3).