Build a Simple Next.js E-commerce Product Listing

Written by

javascriptdebugged

in

In the bustling world of web development, building an e-commerce platform often seems like a daunting task, especially for beginners. However, with the right tools and a structured approach, creating a functional product listing page can be surprisingly accessible. This tutorial will guide you through the process of building a simple, yet effective, product listing page using Next.js, a powerful React framework for building modern web applications. We’ll focus on the core concepts, ensuring that even developers new to Next.js can follow along and learn valuable skills.

Why Next.js for E-commerce?

Next.js offers several advantages that make it an excellent choice for e-commerce projects, even for small-scale implementations like our product listing page:

  • Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js allows you to render your pages on the server or generate them at build time. This improves SEO and initial load times, crucial for e-commerce sites.
  • Routing: Next.js simplifies routing, making it easy to create different pages for your products, categories, and more.
  • API Routes: You can create API endpoints within your Next.js application, allowing you to handle product data fetching, user authentication, and other backend tasks.
  • Optimized Performance: Next.js automatically optimizes images, code splitting, and other performance aspects, resulting in a faster and more responsive user experience.

By leveraging these features, we can build a product listing page that is not only functional but also performant and SEO-friendly.

Project Setup: Setting the Stage

Before we dive into the code, let’s set up our development environment. We’ll use Node.js and npm (or yarn) to create our Next.js project. Make sure you have Node.js installed on your system. If you don’t, you can download it from the official Node.js website.

Open your terminal and run the following command to create a new Next.js project:

npx create-next-app product-listing-app

This command will create a new directory called product-listing-app and set up a basic Next.js project structure for us. Navigate into the project directory:

cd product-listing-app

Now, let’s install some dependencies that we’ll need for this project. We’ll use a library called axios to fetch product data from a mock API. You can use any other method to fetch data, but Axios is a popular and easy-to-use option.

npm install axios

or

yarn add axios

With the project set up and dependencies installed, we’re ready to start building our product listing page.

Fetching Product Data: The API Integration

For this tutorial, we’ll simulate a backend by using a free, public API that provides product data. There are many such APIs available, but for simplicity, we’ll use a mock API. You can easily adapt this to fetch data from your own API or a database later.

Let’s create a new file named products.js inside the pages directory. This file will be our main page, responsible for fetching and displaying the product data.

First, import useState and useEffect from React, and axios:

import { useState, useEffect } from 'react';
import axios from 'axios';

Next, define a functional component called Products. Inside the component, we’ll use useState to manage the product data and a loading state:

function Products() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  // ... (rest of the code)
}

Now, let’s use useEffect to fetch the product data when the component mounts. Inside the useEffect, we’ll use axios to make a GET request to our mock API. Replace the placeholder URL with the actual API endpoint. For this example, we’ll use a free mock API that returns a list of products. Consider using a different API or creating your own to better suit your needs.

useEffect(() => {
  async function fetchProducts() {
    try {
      const response = await axios.get('https://fakestoreapi.com/products'); // Replace with your API endpoint
      setProducts(response.data);
      setLoading(false);
    } catch (error) {
      console.error('Error fetching products:', error);
      setLoading(false);
    }
  }

  fetchProducts();
}, []);

In this code:

  • We use an async function fetchProducts to make the API call.
  • We use a try...catch block to handle potential errors during the API request.
  • If the request is successful, we update the products state with the fetched data and set loading to false.
  • If an error occurs, we log the error to the console and set loading to false.

Finally, let’s render the product data. Inside the Products component’s return statement, we’ll check the loading state and display a loading message if the data is still being fetched. Once the data is available, we’ll map over the products array and render each product’s details.

return (
  <div>
    <h2>Product Listing</h2>
    {loading ? (
      <p>Loading products...</p>
    ) : (
      <div className="product-grid">
        {products.map((product) => (
          <div key={product.id} className="product-card">
            <img src={product.image} alt={product.title} />
            <h3>{product.title}</h3>
            <p>${product.price}</p>
            <button>Add to Cart</button>
          </div>
        ))}
      </div>
    )}
  </div>
);

Here, we iterate through the products array using the map function and render a div for each product. We display the product’s image, title, price, and provide an

More posts