In the ever-evolving landscape of web development, creating compelling and performant e-commerce experiences is a crucial skill. Next.js, with its powerful features and flexibility, provides an excellent framework for building dynamic and user-friendly online stores. This tutorial will guide you, step-by-step, through the process of crafting a custom product listing page using Next.js. We’ll explore data fetching, component composition, dynamic routing, and styling techniques to build a responsive and SEO-friendly product showcase.

Why Build a Custom Product Listing Page?

While pre-built e-commerce platforms offer convenience, they often lack the customization and control needed to create a truly unique brand experience. A custom product listing page allows you to:

• **Tailor the Design:** Match your brand’s aesthetic and create a visually appealing experience.
• **Optimize Performance:** Fine-tune data fetching and rendering for faster loading times.
• **Enhance SEO:** Implement SEO best practices for improved search engine rankings.
• **Integrate Unique Features:** Add custom filters, sorting options, and product recommendations.
• **Control the User Experience:** Design a seamless and intuitive shopping journey.

This tutorial will empower you to build a product listing page that not only showcases your products effectively but also enhances your brand’s identity and drives conversions.

Prerequisites

Before we dive in, make sure you have the following prerequisites:

• **Node.js and npm (or Yarn):** Installed on your local machine.
• **Basic knowledge of HTML, CSS, and JavaScript:** Familiarity with these technologies is essential.
• **A code editor:** (e.g., VS Code, Sublime Text).
• **A basic understanding of React:** Next.js is built on React.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app my-ecommerce-store

This command creates a new Next.js project named “my-ecommerce-store”. Navigate into your project directory:

cd my-ecommerce-store

Now, let’s install any necessary dependencies. For this tutorial, we’ll use a simple data structure for our products. We won’t be integrating with a real e-commerce backend, but you can easily adapt the code to fetch data from your preferred API or database.

Create a file named `products.js` in a `data` directory at the root of your project and add some sample product data. Create the `data` directory if you do not have it.

// data/products.js
const products = [
  {
    id: 1,
    name: "Product 1",
    description: "This is the description for Product 1.",
    price: 29.99,
    imageUrl: "/product1.jpg", // Replace with actual image paths
    category: "Category A",
  },
  {
    id: 2,
    name: "Product 2",
    description: "This is the description for Product 2.",
    price: 49.99,
    imageUrl: "/product2.jpg",
    category: "Category B",
  },
  {
    id: 3,
    name: "Product 3",
    description: "This is the description for Product 3.",
    price: 19.99,
    imageUrl: "/product3.jpg",
    category: "Category A",
  },
  {
    id: 4,
    name: "Product 4",
    description: "This is the description for Product 4.",
    price: 79.99,
    imageUrl: "/product4.jpg",
    category: "Category C",
  },
];

export default products;

Next, create a folder called `components` in the root of your project. This is where we’ll house our reusable React components. Create a `ProductCard.js` file inside the `components` folder.

// components/ProductCard.js
import Image from 'next/image';
import Link from 'next/link';

const ProductCard = ({ product }) => {
  return (
    <div>
      
        <a>
          
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </a>
      
    </div>
  );
};

export default ProductCard;

In this component, we import the `Image` component from `next/image` for optimized image loading and the `Link` component from `next/link` for client-side navigation. The `ProductCard` component takes a `product` prop and renders the product’s image, name, and price. We’ve also used a `Link` component to wrap the product card, making it clickable and linking to a product detail page (which we’ll create later).

Building the Product Listing Page

Now, let’s create the product listing page itself. Open the `pages/index.js` file (or create one if it doesn’t exist). This will be our home page and the product listing page.

// pages/index.js
import products from '../data/products';
import ProductCard from '../components/ProductCard';

const HomePage = () => {
  return (
    <div>
      <h1>Our Products</h1>
      <div>
        {products.map((product) => (
          
        ))}
      </div>
    </div>
  );
};

export default HomePage;

Here, we import our `products` data and the `ProductCard` component. We then map over the `products` array and render a `ProductCard` for each product. The `key` prop is essential for React to efficiently update the list. We’ve wrapped the product cards in a `product-grid` div for styling. Note: We will add the CSS later.

Styling the Page with CSS Modules

To style our page, we’ll use CSS Modules. This approach ensures that our styles are scoped to the components, preventing potential conflicts with other styles. Create a file named `styles/Home.module.css` (or any other name you prefer). Add the following CSS:

/* styles/Home.module.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

.product-card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 5px;
}

Import this CSS module into your `pages/index.js` file:

// pages/index.js
import styles from '../styles/Home.module.css';
import products from '../data/products';
import ProductCard from '../components/ProductCard';

const HomePage = () => {
  return (
    <div>
      <h1>Our Products</h1>
      <div>
        {products.map((product) => (
          
        ))}
      </div>
    </div>
  );
};

export default HomePage;

Notice how we import the styles and use them with `styles.container` and `styles.productGrid`. This is how CSS Modules work – the styles are applied only to the components that import them.

Creating Dynamic Routes for Product Detail Pages

Next, we will set up the routing for individual product detail pages. In Next.js, we can create dynamic routes using the `[param]` syntax within the `pages` directory. Create a file named `pages/products/[id].js`:

// pages/products/[id].js
import { useRouter } from 'next/router';
import products from '../../data/products';
import Image from 'next/image';

const ProductDetail = () => {
  const router = useRouter();
  const { id } = router.query;

  // Find the product based on the ID
  const product = products.find((p) => p.id === parseInt(id));

  if (!product) {
    return <div>Product not found</div>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
};

export default ProductDetail;

In this file, we use the `useRouter` hook from `next/router` to access the route parameters. `router.query.id` gives us the `id` from the URL (e.g., `/products/1` will have an `id` of `1`). We then find the corresponding product from our `products` data and render its details. If the product isn’t found, we display a “Product not found” message.

Styling the Product Detail Page

Create a CSS Module for the product detail page. Create a file named `styles/ProductDetail.module.css`.

/* styles/ProductDetail.module.css */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.container h1 {
  margin-bottom: 10px;
}

.container p {
  margin-bottom: 10px;
}

Import and use the styles in `pages/products/[id].js`:

// pages/products/[id].js
import { useRouter } from 'next/router';
import products from '../../data/products';
import Image from 'next/image';
import styles from '../../styles/ProductDetail.module.css';

const ProductDetail = () => {
  const router = useRouter();
  const { id } = router.query;

  // Find the product based on the ID
  const product = products.find((p) => p.id === parseInt(id));

  if (!product) {
    return <div>Product not found</div>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
};

export default ProductDetail;

Data Fetching and Optimization

In a real-world e-commerce application, data would typically be fetched from an API or database. Next.js offers several ways to fetch data, including:

• **`getServerSideProps`:** Fetches data on each request (Server-Side Rendering). Best for dynamic content that changes frequently.
• **`getStaticProps`:** Fetches data at build time (Static Site Generation). Ideal for content that doesn’t change often.
• **Client-side data fetching:** Fetching data directly in the component using `useEffect` or other methods.

For our example, since we’re using static data, we could technically use `getStaticProps` to fetch the data. However, for simplicity, we’ve imported the data directly. Let’s demonstrate how to use `getStaticProps` in a more realistic scenario where we fetch data from an external API (simulating a backend).

First, update the `pages/index.js` file to fetch data using `getStaticProps`:

// pages/index.js
import styles from '../styles/Home.module.css';
import ProductCard from '../components/ProductCard';

export async function getStaticProps() {
  // Simulate fetching data from an API
  const res = await fetch('https://your-api-endpoint.com/products'); // Replace with your API endpoint
  const products = await res.json();

  return {
    props: { // will be passed to the page component as props
      products,
    },
  };
}

const HomePage = ({ products }) => {
  return (
    <div>
      <h1>Our Products</h1>
      <div>
        {products.map((product) => (
          
        ))}
      </div>
    </div>
  );
};

export default HomePage;

In this example, `getStaticProps` is an asynchronous function that fetches product data from a hypothetical API endpoint. The fetched data is then passed as props to the `HomePage` component. Note: You’ll need to replace `’https://your-api-endpoint.com/products’` with a real API endpoint. If you don’t have an API, you can mock one using a service like Mockoon or json-server.

Next, you’ll need to update the `pages/products/[id].js` file to use `getStaticProps` and `getStaticPaths` for static site generation of the product detail pages.

// pages/products/[id].js
import { useRouter } from 'next/router';
import Image from 'next/image';
import styles from '../../styles/ProductDetail.module.css';

export async function getStaticProps({ params }) {
  // Simulate fetching product data from an API based on the ID
  const res = await fetch(`https://your-api-endpoint.com/products/${params.id}`); // Replace with your API endpoint
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
}

export async function getStaticPaths() {
  // Simulate fetching all product IDs from an API
  const res = await fetch('https://your-api-endpoint.com/products'); // Replace with your API endpoint
  const products = await res.json();

  // Generate paths for each product
  const paths = products.map((product) => ({
    params: {
      id: product.id.toString(),
    },
  }));

  return {
    paths, // An array of possible paths
    fallback: false, //  false or 'blocking'
  };
}

const ProductDetail = ({ product }) => {
  if (!product) {
    return <div>Product not found</div>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
};

export default ProductDetail;

Here, `getStaticPaths` is crucial for static site generation. It fetches all product IDs and generates the necessary paths (e.g., `/products/1`, `/products/2`). `getStaticProps` then fetches the data for each specific product based on the ID. The `fallback: false` setting means that any paths not generated by `getStaticPaths` will result in a 404 error. If you set `fallback: true`, Next.js will attempt to generate the page on demand (useful for a large number of products). If you set `fallback: ‘blocking’`, Next.js will wait for the page to be generated before showing anything to the user.

Image Optimization

Next.js’s `next/image` component provides excellent image optimization features. It automatically optimizes images for different screen sizes and formats (WebP), improving performance and user experience. We’ve already used it in our `ProductCard` and `ProductDetail` components. Make sure to provide the `width` and `height` attributes to the `Image` component. Next.js uses these attributes to calculate the correct image size and prevent layout shifts (which is important for SEO and user experience).

SEO Best Practices

Optimizing your product listing page for search engines is essential for visibility. Here are some SEO best practices:

• **Use Descriptive Titles and Meta Descriptions:** Ensure your page title and meta description accurately reflect the content and include relevant keywords.
• **Optimize Image Alt Attributes:** Provide descriptive `alt` attributes for all images.
• **Use Semantic HTML:** Use semantic HTML tags (e.g., `
  

  `, `

  `, `

  `, `

  `) to structure your content.

• **Implement Structured Data:** Use schema.org markup to provide search engines with more context about your products (e.g., product name, price, availability).
• **Ensure Mobile-Friendliness:** Make sure your page is responsive and looks good on all devices.
• **Use Clean URLs:** Use descriptive and keyword-rich URLs (e.g., `/products/product-name` instead of `/products/123`). Next.js’s file-based routing helps with this.
• **Optimize Page Speed:** Use image optimization, code splitting, and other performance optimization techniques to ensure fast loading times.

Here’s how you might add a meta description to your `pages/index.js` file:

// pages/index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import ProductCard from '../components/ProductCard';

export async function getStaticProps() {
  // Simulate fetching data from an API
  const res = await fetch('https://your-api-endpoint.com/products'); // Replace with your API endpoint
  const products = await res.json();

  return {
    props: { // will be passed to the page component as props
      products,
    },
  };
}

const HomePage = ({ products }) => {
  return (
    
      
        
        
      
      

        
Our Products
        

          {products.map((product) => (
            
          ))}