When will you use this?

Reach for data fetching and Server Actions when pages need database content or form submissions.

• Enrollments, quiz scores, and course progress load from the server — often with Server Actions.
• Forms that enroll a student in a course use Server Actions instead of a separate REST call.

Real-world: Freshdesk-style support portal

The Customer support team building Freshdesk-style support portal uses E-Commerce App Project to apply Next.js patterns to product listing, cart, and checkout UI. support agents never see the TypeScript files — they just get a fast, reliable ticket queue and reply interface.

Production-style code

// app/products/[slug]/page.tsx
export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const product = await getProduct(slug);
  return (
    <main>
      <h1>{product.name}</h1>
      <p>₹{product.price}</p>
      <AddToCartButton productId={product.id} />
    </main>
  );
}

What happens in production: In Freshdesk-style support portal, getting E-Commerce App Project right means support agents trust the ticket queue and reply interface every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// app/products/[slug]/page.tsx
export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const product = await getProduct(slug);
  return (
    <main>
      <h1>{product.name}</h1>
      <p>₹{product.price}</p>
      <AddToCartButton productId={product.id} />
    </main>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Server Component loads product.
• Client AddToCartButton updates cart context or cookie.
• Reuse routing, Image, and metadata patterns from LearnHub.

Do this on your computer

1. Fork LearnHub layout to a shop layout
2. Build /products and /products/[slug]
3. Add Client cart with context or Zustand
4. Deploy demo and link on resume
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.
• Use npm run dev while editing E-Commerce App Project — the page hot-reloads on save.

Remember

Reuse LearnHub architecture for commerce. Server for catalog SEO; client for cart. Ship one vertical slice end-to-end.

Common questions