medusa-storefront

Medusa v2 Storefront with Next.js

Before writing code

Fetch live docs:

1. Fetch https://docs.medusajs.com/resources/storefront-development for storefront overview
2. Web-search site:docs.medusajs.com nextjs starter storefront for starter template
3. Web-search site:docs.medusajs.com JS SDK client setup for Medusa SDK configuration
4. Web-search site:docs.medusajs.com storefront API reference for Store API endpoints
5. Web-search site:github.com medusajs nextjs-starter-medusa for latest starter source

Storefront Architecture

Medusa v2 storefronts are headless -- they consume the Store API over HTTP:

| Layer | Component | |-------|-----------| | Frontend | Next.js App (SSR/RSC) | | HTTP Client | Medusa JS SDK | | Backend | Medusa Backend (/store/* API routes) | | Storage | PostgreSQL / Redis |

Next.js Starter Structure

| Directory | Key Files | |-----------|-----------| | app/ | layout.tsx, page.tsx (homepage) | | app/(main)/products/ | page.tsx (listing), [handle]/page.tsx (detail) | | app/(main)/collections/ | [handle]/page.tsx (collection) | | app/(main)/cart/, app/(main)/checkout/ | Cart page, checkout flow | | app/(auth)/, app/account/ | Login/register, customer dashboard | | lib/ | sdk.ts (Medusa client), data/ (fetching), util/ | | components/ | products/, cart/, checkout/, layout/ | | Root | next.config.js, .env.local |

JS SDK Client Setup

SDK Installation

The Medusa JS SDK provides typed access to the Store API:

// lib/sdk.ts — Fetch live docs for Medusa SDK initialization
import Medusa from "@medusajs/js-sdk"

export const sdk = new Medusa({
  baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!,
  // Fetch live docs for publishableKey and other options
})

Environment Variables

NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000
NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_...

The publishable API key is required for Store API requests and scopes them to a specific sales channel.

Key Store API Domains

| Domain | SDK Namespace | Key Operations | |--------|--------------|----------------| | Products | sdk.store.product | List, retrieve by handle | | Collections | sdk.store.collection | List, retrieve | | Categories | sdk.store.category | List, tree | | Cart | sdk.store.cart | Create, add items, update | | Checkout | sdk.store.cart | Add shipping, complete | | Customer | sdk.store.customer | Register, login, profile | | Orders | sdk.store.order | List customer orders | | Regions | sdk.store.region | List regions and currencies | | Shipping | sdk.store.fulfillment | List shipping options |

Fetch live docs for the complete SDK namespace list and method signatures.

Server Components vs Client Components

| Pattern | Use For | |---------|---------| | Server Component (RSC) | Product listing, product detail, static content | | Client Component | Cart interactions, checkout form, quantity selectors | | Server Action | Cart mutations, checkout submission |

Data Fetching in Server Components

// app/(main)/products/[handle]/page.tsx
// Fetch live docs for SDK method signatures
export default async function ProductPage({ params }) {
  const { product } = await sdk.store.product.retrieve(params.handle)
  return <ProductTemplate product={product} />
}

Cart Flow

| Step | Action | SDK Method | |------|--------|-----------| | 1. Create cart | On first add-to-cart | sdk.store.cart.create() | | 2. Add line item | User adds product | sdk.store.cart.addLineItem() | | 3. Update quantity | User changes qty | sdk.store.cart.updateLineItem() | | 4. Remove item | User removes product | sdk.store.cart.removeLineItem() | | 5. Set region | Auto or user selection | sdk.store.cart.update() |

Cart ID is typically stored in a cookie or localStorage for persistence across sessions.

Checkout Flow

| Step | Required Data | SDK Call | |------|--------------|---------| | 1. Address | Shipping + billing address | sdk.store.cart.update() | | 2. Shipping | Selected shipping option | sdk.store.cart.addShippingMethod() | | 3. Payment | Payment provider session | sdk.store.cart.initiatePaymentSession() | | 4. Complete | Confirmation | sdk.store.cart.complete() |

Customer Authentication

| Flow | Description | |------|-------------| | Registration | Create customer account via Store API | | Login | Authenticate and receive session token | | Session | Token stored in cookie, sent with requests | | Profile | Update customer info, addresses | | Orders | View past orders linked to customer |

// Fetch live docs for customer auth SDK methods
await sdk.auth.login("customer", "emailpass", {
  email: "user@example.com",
  password: "password",
})

Region and Currency Handling

• Medusa supports multiple regions with different currencies
• Storefront should detect or let the user select a region
• All product prices are region-aware
• Cart is tied to a region which determines currency and tax rules

Performance Considerations

| Technique | Implementation | |-----------|---------------| | Static Generation (SSG) | Use generateStaticParams for product pages | | ISR | Revalidate product pages periodically | | Streaming | Use Suspense boundaries for slow data | | Image optimization | Use Next.js <Image> with Medusa image URLs | | Prefetching | Use <Link> for product navigation |

Best Practices

• Use Server Components for data fetching -- minimize client-side JavaScript
• Store the cart ID in a cookie for cross-tab and SSR access
• Use the publishable API key to scope requests to the correct sales channel
• Handle region/currency at the layout level, not per-page
• Implement optimistic UI updates for cart operations to improve perceived performance
• Use generateStaticParams for product and collection pages for SEO and speed
• Keep checkout as a linear flow -- do not allow skipping steps

Fetch the Medusa storefront documentation and Next.js starter source for exact SDK method signatures, component patterns, and checkout flow details before implementing.