Next.js & TypeScript: Building a Simple E-commerce Cart

Written by

learnmodernwebdevelopment

in

In the ever-evolving landscape of web development, creating dynamic and user-friendly e-commerce experiences is paramount. One of the critical components of any online store is the shopping cart. It allows users to select products, manage quantities, and ultimately, prepare for checkout. Building a robust shopping cart system can be complex, involving state management, data persistence, and UI updates. This tutorial dives into building a simple, yet functional, e-commerce cart using Next.js and TypeScript, two powerful technologies that streamline the development process. We’ll explore how to manage cart items, update quantities, and provide a seamless user experience, all while leveraging the benefits of type safety and server-side rendering.

Why Build an E-commerce Cart with Next.js and TypeScript?

Next.js, a React framework, offers a suite of features that make it ideal for building e-commerce applications. Its server-side rendering (SSR) and static site generation (SSG) capabilities improve SEO and initial load times. TypeScript, on the other hand, adds static typing to JavaScript, catching potential errors during development and improving code maintainability. Combining these technologies provides a solid foundation for building performant, scalable, and maintainable e-commerce carts.

Here’s a breakdown of the benefits:

  • Performance: Next.js’s SSR and SSG optimize for faster initial page loads.
  • SEO: SSR improves search engine indexing.
  • Type Safety: TypeScript helps prevent runtime errors.
  • Developer Experience: TypeScript and Next.js offer a great DX.
  • Scalability: Next.js applications are easy to scale.

Setting Up the Project

Let’s get started by setting up a new Next.js project with TypeScript. Open your terminal and run the following command:

npx create-next-app@latest my-ecommerce-cart --typescript

This command creates a new Next.js project named “my-ecommerce-cart” and configures it for TypeScript. Navigate into the project directory:

cd my-ecommerce-cart

Now, install any necessary dependencies. For this tutorial, we will not need external libraries, but in a real-world scenario, you might install libraries for state management (like Zustand or Redux), styling (like Tailwind CSS or Styled Components), or data fetching (like Axios or SWR).

Project Structure

Before diving into the code, let’s establish a basic project structure. This will help us organize our components and keep our codebase clean.

my-ecommerce-cart/
├── components/
│   ├── CartItem.tsx
│   ├── ProductCard.tsx
│   └── Cart.tsx
├── pages/
│   ├── index.tsx
│   └── products.tsx
├── public/
│   └── ...
├── styles/
│   └── globals.css
├── .gitignore
├── next.config.js
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.json

This is a basic structure. As the project grows, you might add folders for utilities, API routes, or other components.

Creating Product Cards

First, let’s create a simple product card component. This component will display the product’s image, name, and price, and include a button to add the product to the cart. Create a file named ProductCard.tsx inside the components directory:

// components/ProductCard.tsx

import React from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
  imageUrl: string;
}

interface ProductCardProps {
  product: Product;
  onAddToCart: (product: Product) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
  return (
    <div className="border p-4 rounded shadow-md w-64">
      <img src={product.imageUrl} alt={product.name} className="w-full h-40 object-cover mb-2" />
      <h3 className="text-lg font-semibold mb-1">{product.name}</h3>
      <p className="text-gray-700 mb-2">${product.price.toFixed(2)}</p>
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        onClick={() => onAddToCart(product)}
      >
        Add to Cart
      </button>
    </div>
  );
};

export default ProductCard;

This component takes a product prop of type Product and an onAddToCart prop, which is a function that will be called when the “Add to Cart” button is clicked. The Product interface defines the structure of our product data. The component uses basic inline styling (feel free to use Tailwind CSS or any other styling framework you prefer).

Creating the Cart Item Component

Now, let’s create a component to display each item in the cart. This component will show the product’s name, price, quantity, and have buttons to increase or decrease the quantity. Create a file named CartItem.tsx inside the components directory:


// components/CartItem.tsx

import React from 'react';

interface CartItemProps {
  item: {
    id: number;
    name: string;
    price: number;
    quantity: number;
  };
  onUpdateQuantity: (id: number, newQuantity: number) => void;
}

const CartItem: React.FC<CartItemProps> = ({ item, onUpdateQuantity }) => {
  const handleIncrease = () => {
    onUpdateQuantity(item.id, item.quantity + 1);
  };

  const handleDecrease = () => {
    if (item.quantity > 1) {
      onUpdateQuantity(item.id, item.quantity - 1);
    }
  };

  return (
    <div className="flex items-center justify-between py-2 border-b">
      <span>{item.name}</span>
      <div className="flex items-center gap-2">
        <button
          className="bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded"
          onClick={handleDecrease}
        >
          -</button>
        <span>{item.quantity}</span>
        <button
          className="bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded"
          onClick={handleIncrease}
        >
          +</button>
      </div>
      <span>${(item.price * item.quantity).toFixed(2)}</span>
    </div>
  );
};

export default CartItem;

This component takes an item prop (which represents a single item in the cart) and an onUpdateQuantity prop. The onUpdateQuantity function is responsible for updating the quantity of the item in the cart. The component also includes buttons to increase and decrease the quantity.

Creating the Cart Component

Next, let’s create the main cart component. This component will display the list of items in the cart and the total amount. Create a file named Cart.tsx inside the components directory:


// components/Cart.tsx

import React from 'react';
import CartItem from './CartItem';

interface CartProps {
  cartItems: {
    id: number;
    name: string;
    price: number;
    quantity: number;
  }[];
  onUpdateQuantity: (id: number, newQuantity: number) => void;
}

const Cart: React.FC<CartProps> = ({ cartItems, onUpdateQuantity }) => {
  const totalAmount = cartItems.reduce(
    (total, item) => total + item.price * item.quantity, 
    0
  );

  return (
    <div className="p-4 border rounded shadow-md w-80">
      <h2 className="text-xl font-semibold mb-4">Shopping Cart</h2>
      {cartItems.length === 0 ? (
        <p>Your cart is empty.</p>
      ) : (
        <div>
          {cartItems.map((item) => (
            <CartItem
              key={item.id}
              item={item}
              onUpdateQuantity={onUpdateQuantity}
            />
          ))}
          <div className="mt-4 font-bold text-lg">
            Total: ${totalAmount.toFixed(2)}
          </div>
        </div>
      )}
    </div>
  );
};

export default Cart;

This component takes two props: cartItems (an array of cart items) and onUpdateQuantity. It displays the list of cart items using the CartItem component and calculates the total amount. It also shows a message if the cart is empty.

Building the Product Listing Page

Now, let’s create the product listing page (pages/index.tsx). This page will display the product cards and the cart. We’ll use React’s useState hook to manage the cart items’ state.


// pages/index.tsx

import React, { useState } from 'react';
import ProductCard from '../components/ProductCard';
import Cart from '../components/Cart';

interface Product {
  id: number;
  name: string;
  price: number;
  imageUrl: string;
}

const products: Product[] = [
  {
    id: 1,
    name: 'Product 1',
    price: 19.99,
    imageUrl: 'https://via.placeholder.com/150',
  },
  {
    id: 2,
    name: 'Product 2',
    price: 29.99,
    imageUrl: 'https://via.placeholder.com/150',
  },
  {
    id: 3,
    name: 'Product 3',
    price: 9.99,
    imageUrl: 'https://via.placeholder.com/150',
  },
];

const Home: React.FC = () => {
  const [cartItems, setCartItems] = useState<{
    id: number;
    name: string;
    price: number;
    quantity: number;
  }[]>([]);

  const handleAddToCart = (product: Product) => {
    const existingItemIndex = cartItems.findIndex((item) => item.id === product.id);

    if (existingItemIndex !== -1) {
      // If the product already exists in the cart, increase the quantity
      const updatedCartItems = [...cartItems];
      updatedCartItems[existingItemIndex].quantity += 1;
      setCartItems(updatedCartItems);
    } else {
      // If the product is not in the cart, add it with a quantity of 1
      setCartItems([...cartItems, { ...product, quantity: 1 }]);
    }
  };

  const handleUpdateQuantity = (id: number, newQuantity: number) => {
    setCartItems(cartItems.map(item => {
      if (item.id === id) {
        return { ...item, quantity: newQuantity };
      }
      return item;
    }));
  };

  return (
    <div className="container mx-auto p-4 flex gap-8">
      <div className="w-3/4">
        <h1 className="text-2xl font-bold mb-4">Products</h1>
        <div className="grid grid-cols-3 gap-4">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} onAddToCart={handleAddToCart} />
          ))}
        </div>
      </div>
      <Cart cartItems={cartItems} onUpdateQuantity={handleUpdateQuantity} />
    </div>
  );
};

export default Home;

In this component, we:

  • Import the ProductCard and Cart components.
  • Define a products array with some sample product data.
  • Use the useState hook to manage the cartItems state.
  • Implement the handleAddToCart function, which adds a product to the cart or increases its quantity if it already exists.
  • Implement the handleUpdateQuantity function, which updates the quantity of an item in the cart.
  • Render the ProductCard components for each product and the Cart component.

Running the Application

Now that we have built all the necessary components, let’s run the application. Open your terminal, make sure you are in the project directory, and run the following command:

npm run dev

This command starts the Next.js development server. Open your web browser and go to http://localhost:3000. You should see the product listing page with the product cards and the cart. You can click the “Add to Cart” button to add products to your cart and use the “+” and “-” buttons to adjust the quantities.

Common Mistakes and How to Fix Them

While building this simple e-commerce cart, beginners might encounter some common mistakes. Here’s a list of potential issues and how to address them:

  • Incorrect TypeScript Types: Make sure your interfaces and types match the data you’re working with. Use the TypeScript compiler to catch type errors during development. Review the console for error messages.
  • State Management Issues: Incorrectly updating the cart state can lead to unexpected behavior. Ensure you’re using the correct methods to update the state. When using the useState hook, always create a new array/object when updating state to trigger a re-render.
  • UI Rendering Problems: If your components don’t render correctly, check for errors in your JSX and CSS. Make sure you are importing and using the components properly. Check for typos in prop names, missing closing tags, or incorrect CSS class names.
  • Quantity Update Logic Errors: Errors in the quantity update logic can result in negative quantities or incorrect calculations. Double-check your handleIncrease and handleDecrease functions to ensure they are working correctly.
  • Missing Dependencies: If you encounter an error related to a missing module, make sure you’ve installed all the necessary dependencies using npm or yarn.

By understanding these common pitfalls, you can troubleshoot your code more effectively and build a robust e-commerce cart.

Key Takeaways

This tutorial demonstrated how to build a basic e-commerce cart using Next.js and TypeScript. We covered the following key concepts:

  • Project Setup: How to set up a new Next.js project with TypeScript.
  • Component Creation: Building reusable components for product cards, cart items, and the cart.
  • State Management: Managing the cart items’ state using the useState hook.
  • Event Handling: Handling events like adding items to the cart and updating quantities.
  • UI Rendering: Rendering the product listing page and the cart with the appropriate data.

FAQ

Here are some frequently asked questions about building an e-commerce cart with Next.js and TypeScript:

  1. How can I persist the cart data?

    You can use local storage, cookies, or a database to persist the cart data. For more complex applications, consider using a state management library like Redux or Zustand.

  2. How do I handle the checkout process?

    The checkout process involves integrating with a payment gateway (like Stripe or PayPal), collecting shipping information, and processing the order. This is a more advanced topic and typically involves backend development.

  3. Can I use a different styling framework?

    Yes, you can use any CSS-in-JS library or CSS framework you prefer (like Tailwind CSS, Styled Components, or Material UI). The core logic of the cart remains the same, regardless of the styling approach.

  4. How do I handle server-side rendering for the cart?

    Next.js handles SSR by default. If your cart data depends on the user’s session or is fetched from a database, you would fetch this data in the getServerSideProps or getStaticProps function and pass it as props to your components.

The creation of a shopping cart is a fundamental aspect of e-commerce. It is a critical component for any online store. The implementation we’ve explored here, using Next.js and TypeScript, provides a strong foundation. This tutorial serves as a starting point. It offers a solid understanding of how to manage cart items, update quantities, and create a user-friendly experience. Remember that the journey of a thousand miles begins with a single step. As you continue to build upon this foundation, you’ll be well-equipped to create more complex and feature-rich e-commerce applications. Embrace the power of Next.js and TypeScript, and continue learning and experimenting. Happy coding!

More posts