Next.js E-commerce App
Build a complete online store with Next.js
🛒 What is a Next.js E-commerce App?
A Next.js e-commerce app provides a full shopping experience with product listings, cart management, and checkout. It leverages server components for fast loading and client components for interactive features like adding items to cart.
// app/page.tsx - Store Homepage
export default function Store() {
return (
<main>
<h1>Welcome to Our Store</h1>
<p>Shop the latest products!</p>
</main>
)
}
Key E-commerce Features
Products
Display product catalog
// app/products/page.tsx
export default function Products() {
return <h1>Products</h1>
}Shopping Cart
Manage cart items
// app/cart/page.tsx
export default function Cart() {
return <h1>Your Cart</h1>
}Checkout
Process payments
// app/checkout/page.tsx
export default function Checkout() {
return <h1>Checkout</h1>
}User Orders
Track order history
// app/orders/page.tsx
export default function Orders() {
return <h1>Orders</h1>
}🔹 Product Listing Page
Display products in a grid layout with images, names, and prices. This component fetches product data and renders each item with essential information for customers to browse.
// app/products/page.tsx
const products = [
{ id: 1, name: 'T-Shirt', price: 29.99, image: '/tshirt.jpg' },
{ id: 2, name: 'Jeans', price: 59.99, image: '/jeans.jpg' },
{ id: 3, name: 'Shoes', price: 89.99, image: '/shoes.jpg' }
]
export default function ProductsPage() {
return (
<div>
<h1>Our Products</h1>
<div className="grid">
{products.map(product => (
<div key={product.id} className="product-card">
<img src={product.image} alt={product.name} />
<h3>{product.name}</h3>
<p>${product.price}</p>
<button>Add to Cart</button>
</div>
))}
</div>
</div>
)
}Output:
Our Products
T-Shirt
$29.99
Jeans
$59.99
Shoes
$89.99
🔹 Shopping Cart Component
Create a cart to manage selected items with quantities and totals. This client component uses React state to handle adding, removing, and updating product quantities dynamically.
// app/cart/page.tsx
'use client'
import { useState } from 'react'
export default function CartPage() {
const [cart, setCart] = useState([
{ id: 1, name: 'T-Shirt', price: 29.99, quantity: 2 },
{ id: 2, name: 'Jeans', price: 59.99, quantity: 1 }
])
const total = cart.reduce((sum, item) =>
sum + (item.price * item.quantity), 0
)
return (
<div>
<h1>Shopping Cart</h1>
{cart.map(item => (
<div key={item.id}>
<h3>{item.name}</h3>
<p>${item.price} x {item.quantity}</p>
</div>
))}
<h2>Total: ${total.toFixed(2)}</h2>
<button>Checkout</button>
</div>
)
}Output:
Shopping Cart
T-Shirt
$29.99 x 2
Jeans
$59.99 x 1
Total: $119.97
🔹 Product Detail Page
Show detailed information for a single product with images and descriptions. Dynamic routing allows each product to have its own page with complete details and purchase options.
// app/products/[id]/page.tsx
export default function ProductDetail({ params }) {
const product = {
id: params.id,
name: 'Premium T-Shirt',
price: 29.99,
description: 'High quality cotton t-shirt',
sizes: ['S', 'M', 'L', 'XL']
}
return (
<div>
<h1>{product.name}</h1>
<p>${product.price}</p>
<p>{product.description}</p>
<select>
{product.sizes.map(size => (
<option key={size}>{size}</option>
))}
</select>
<button>Add to Cart</button>
</div>
)
}🔹 Checkout Form
Collect shipping and payment information from customers. This form component handles user input validation and prepares order data for payment processing and order confirmation.
// app/checkout/page.tsx
'use client'
export default function CheckoutPage() {
const handleSubmit = (e) => {
e.preventDefault()
alert('Order placed!')
}
return (
<form onSubmit={handleSubmit}>
<h1>Checkout</h1>
<input type="text" placeholder="Full Name" required />
<input type="email" placeholder="Email" required />
<input type="text" placeholder="Address" required />
<h3>Payment</h3>
<input type="text" placeholder="Card Number" required />
<button type="submit">Place Order</button>
</form>
)
}