Ecommerce

## 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 | Concept | Role in Ecommerce | |---|---| | Product route | `/products/[slug]` for details. | | Category route | `/categories/[slug]` for browse pages. | | Client cart | Interactive cart drawer or page. | | Route Handler | Checkout sessions and webhooks. | | Revalidation | Refresh 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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | Trusting client prices | Cart data comes from the browser. | Recalculate totals server-side. | | Making the whole product page client-side | Cart button needs interactivity. | Keep only cart controls client-side. | | Caching checkout responses | Performance habits leak into payments. | Keep checkout dynamic and verified. | | Forgetting webhooks | Payment 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 | Feature | Browser Impact | Notes | |---|---|---| | Product pages | Mostly HTML | Fast and SEO-friendly. | | Cart island | Requires JavaScript | Keep it small and resilient. | | Checkout redirect | Standard browser navigation | Verify 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 | Need | Pattern | |---|---| | Product page | `/products/[slug]` | | Category page | `/categories/[slug]` | | Cart UI | Small Client Component | | Checkout | `app/api/checkout/route.ts` | | Payment webhook | Route 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.