Production-ready Medusa Storefront

Professional Next.js + TypeScript storefront — modular, deployable, and payment-ready. This documentation covers installation, environment, payment connectors, and deployment guidelines.

Project Overview

This storefront is an independent Next.js presentation layer that connects to a Medusa backend. It focuses on performance, developer ergonomics, and production readiness.

Features Included

Product listing & detail pages
Cart & checkout with payment provider adapters
Region-aware routing & locale handling
Sitemap generation & SEO best practices
CI-friendly build & production settings

Tech Stack

Next.js (app/router), TypeScript, Tailwind CSS / design tokens, and Medusa backend. Optional Node services for webhooks and payment reconciliation.

Storefront Architecture

Presentation layer — API bridge — payment connectors. Keep UI thin, follow Single Responsibility; move heavy tasks to backend services.

Installation Guide

Install & run

cd storefront
npm install
npm run dev

Environment Variables

.env.local (example)

NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_xxxxxxxxxxxxx
NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000
NEXT_PUBLIC_DEFAULT_REGION=dk
NEXT_PUBLIC_BASE_URL=http://localhost:8001
NEXT_PUBLIC_STRIPE_KEY=
NEXT_PUBLIC_RAZORPAY_KEY_ID=

Connecting to Medusa Backend

Ensure backend runs and CORS permits the storefront origin.

Backend quick start

cd my-medusa-store/apps/backend
npm install
npm run dev

Payment Gateway Integration

Stripe and Razorpay adapters are supported. Configure publishable keys in the storefront and secrets in the backend.

Payments env

NEXT_PUBLIC_STRIPE_KEY=
NEXT_PUBLIC_MEDUSA_PAYMENTS_PUBLISHABLE_KEY=
NEXT_PUBLIC_RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=

Region-based Routing

Middleware can prefix routes per region (e.g. /dk/products). Keep region detection separate from business logic.

Build & Production

Production commands

npm run build
npm run start

Deployment Checklist

CORS includes production domain
Publishable keys set
Payment webhooks reachable and secured
Regions configured in backend

Quick Start

Quick start

# backend
cd my-medusa-store/apps/backend
npm install
npm run dev

# storefront
cd storefront
npm install
npm run dev

Contact & Pricing

Request private repository access or an enterprise deployment quote.

Request Source Code

Storefront Docs