NextJS 14 Ecommerce Store

Features

• Server-side rendering with React Server Components
• Shopping cart with persistent state
• Stripe payment integration
• NextAuth user authentication
• Product search & category filtering
• Responsive Tailwind UI
• MongoDB with Mongoose ODM

App Router Structure

/app
├── layout.tsx          # Root layout + providers
├── page.tsx            # Homepage
├── products/
│   ├── page.tsx        # Product listing (SSR)
│   └── [id]/page.tsx   # Product detail
├── cart/
│   └── page.tsx        # Cart page
├── checkout/
│   └── page.tsx        # Stripe checkout
└── api/
    ├── auth/[...nextauth]/route.ts
    └── products/route.ts

Server Component Example

// app/products/page.tsx
import { getProducts } from '@/lib/db';
import ProductCard from '@/components/ProductCard';

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    

      {products.map(p => (
        
      ))}
    
  );
}