Why patterns improve architecture in NextJS - See It in Action

Why Patterns Improve Architecture in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of products. You want to organize your code using a common pattern to keep it clean and easy to maintain.

🎯 Goal: Build a Next.js component that uses a pattern to separate data, configuration, and rendering logic clearly. This will help you see how patterns improve the app's structure and make it easier to update later.

📋 What You'll Learn

Create a data array of products with exact names and prices

Add a configuration variable to filter products by minimum price

Use a filter method to select products above the minimum price

Render the filtered products in a clean, semantic list

💡 Why This Matters

🌍 Real World

In real projects, separating data, configuration, and rendering logic helps teams work together and makes apps easier to update and debug.

💼 Career

Understanding and applying patterns in Next.js is essential for building scalable, maintainable web applications in professional development.

1

DATA SETUP: Create the products array

Create a constant array called products with these exact objects: { name: 'Laptop', price: 1200 }, { name: 'Phone', price: 800 }, and { name: 'Tablet', price: 600 }.

NextJS

// Create the products array with exact objects
// Your code here

Need a hint?

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

2

CONFIGURATION: Add a minimum price filter

Create a constant called minPrice and set it to 700.

NextJS

const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 600 }
];

// Create minPrice constant and set to 700
// Your code here

Need a hint?

Use const minPrice = 700; to set the filter value.

3

CORE LOGIC: Filter products by minimum price

Create a constant called filteredProducts that filters products to include only items where price is greater than or equal to minPrice.

NextJS

const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 600 }
];

const minPrice = 700;

// Filter products by minPrice
// Your code here

Need a hint?

Use products.filter(product => product.price >= minPrice) to get filtered products.

4

COMPLETION: Render the filtered products list

Create a React functional component called ProductList that returns a <ul> with each filteredProducts item rendered as a <li> showing the product name and price. Export ProductList as default.

NextJS

const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 600 }
];

const minPrice = 700;

const filteredProducts = products.filter(product => product.price >= minPrice);

// Create ProductList component that renders filteredProducts in a ul
// Your code here

Need a hint?

Use filteredProducts.map inside a <ul> to render each product as a <li>.