5. Frontend Architecture

Server Components (no JS sent to browser):
  ├── ProductGrid, ProductCard
  ├── OrderHistory, OrderSummary
  ├── Navbar shell
  └── All static page content

Client Components (interactive — 'use client'):
  ├── AddToCartButton    → onClick → Medusa SDK → Zustand
  ├── CartIcon           → reads Zustand cart store
  ├── CartDrawer         → always mounted, reads isDrawerOpen
  ├── PaymentForm        → Stripe Elements
  ├── DownloadButton     → onClick → GET /store/downloads/:token
  └── FilterBar          → onClick → updates URL → server refetch

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  const token = request.cookies.get('_medusa_jwt')?.value
  const isProtected = request.nextUrl.pathname.startsWith('/account') ||
                      request.nextUrl.pathname.startsWith('/checkout')
  const isAuthPage = request.nextUrl.pathname.startsWith('/login')
 
  // No token + protected route → redirect to login
  if (!token && isProtected) {
    const url = new URL('/login', request.url)
    url.searchParams.set('redirect', request.nextUrl.pathname)
    return NextResponse.redirect(url)
  }
 
  // Has token + auth page → redirect to account
  if (token && isAuthPage) {
    return NextResponse.redirect(new URL('/account', request.url))
  }
}
 
export const config = {
  matcher: ['/account/:path*', '/checkout/:path*', '/login'],
}