ReviseAlgo Logo

Projects

Ecommerce

Build a Next.js ecommerce storefront with product routes, category browsing, cart client islands, checkout APIs, caching, and SEO.

1. Learning Objectives

By the end of this project, you will be able to design an ecommerce app with product pages, category filters, cart state, checkout routes, cache invalidation, and production SEO.

Difficulty: Advanced.

2. Prerequisites

  • Dynamic routes.
  • Server and Client Components.
  • Route Handlers.
  • Metadata API.

    • 3. Overview

    An ecommerce app combines mostly public product browsing with highly dynamic cart, checkout, inventory, and account flows. Next.js works well because product pages can be server-rendered or statically generated while cart interactions stay in small Client Components.

    4. Why This Topic Matters

    Ecommerce forces tradeoffs between speed, freshness, personalization, and correctness. Product data can be cached, but checkout and inventory must be handled carefully.

    5. Real-World Analogy

    The storefront is the showroom, the cart is the shopper's basket, and checkout is the cashier. The showroom can be polished and cached; the cashier must verify everything live.

    6. Core Concepts

    ConceptRole in Ecommerce
    Product route/products/[slug] for details.
    Category route/categories/[slug] for browse pages.
    Client cartInteractive cart drawer or page.
    Route HandlerCheckout sessions and webhooks.
    RevalidationRefresh products after inventory or price changes.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? Product data stays server-rendered, while the interactive cart behavior is isolated to a small client island.

    10. Interactive Playground

    Try this:

  • Add search params for sort and filters.
  • Add a cart drawer Client Component.
  • Create a checkout Route Handler.
  • Revalidate product pages after a fake inventory update.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Trusting client pricesCart data comes from the browser.Recalculate totals server-side.
    Making the whole product page client-sideCart button needs interactivity.Keep only cart controls client-side.
    Caching checkout responsesPerformance habits leak into payments.Keep checkout dynamic and verified.
    Forgetting webhooksPayment provider state changes externally.Handle webhooks in Route Handlers.

    12. Best Practices

  • Render product pages on the server.
  • Keep cart UI as a small Client Component.
  • Validate price, inventory, and user identity server-side.
  • Use Route Handlers for checkout sessions and webhooks.
  • Generate rich product metadata and structured data.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Product pagesMostly HTMLFast and SEO-friendly.
    Cart islandRequires JavaScriptKeep it small and resilient.
    Checkout redirectStandard browser navigationVerify server-side first.

    14. Interview Questions

    Easy: Why should product pages usually be Server Components?

    Answer: Product data can be loaded server-side and sent as HTML without shipping unnecessary JavaScript.

    Medium: Why should checkout totals be recalculated on the server?

    Answer: Browser cart data can be changed by users, so the server must verify prices, discounts, and inventory.

    Hard: How would you handle inventory changes after a webhook?

    Answer: Process the webhook in a Route Handler, update inventory, and revalidate affected product/category pages or tags.

    15. Debugging Exercise

    Bug report: "Users can change cart prices in DevTools and checkout with discounts."

    Solution

    Do not trust client-submitted prices. Submit product IDs and quantities, then load authoritative prices and inventory on the server before creating a checkout session.

    16. Practice Exercises

  • Easy: Build a product detail route.
  • Medium: Add category filtering with searchParams.
  • Hard: Add checkout and webhook routes with server-side validation.

    • 17. Scenario-Based Challenge

    Your store has 10,000 products, frequent price updates, and a personalized cart. Which parts should be cached?

    Walkthrough

    Cache product and category pages with revalidation tied to catalog updates. Keep cart, checkout, and account pages dynamic and user-specific.

    18. Quick Quiz

    1. What route handles product details? Answer: /products/[slug]. 2. What should validate prices? Answer: Server code. 3. What should handle payment callbacks? Answer: Route Handlers. 4. What UI should be client-side? Answer: Interactive cart controls. 5. What updates cached product pages? Answer: Revalidation.

    19. Summary & Key Takeaways

  • Ecommerce mixes static catalog pages with dynamic transactional flows.
  • Server Components keep product pages fast.
  • Client Components should be limited to interactions.
  • Checkout must verify all critical data server-side.
  • Webhooks and revalidation keep external state synchronized.

    • 20. Cheat Sheet

    NeedPattern
    Product page/products/[slug]
    Category page/categories/[slug]
    Cart UISmall Client Component
    Checkoutapp/api/checkout/route.ts
    Payment webhookRoute Handler plus revalidation

    21. Further Reading

  • Next.js Docs: Fetching Data.
  • Next.js Docs: Route Handlers.
  • Next.js Docs: Mutating Data.

    • 22. Next Lesson Preview

    Next, you will build a SaaS dashboard with authenticated layouts, data tables, settings, and server-side mutations.