You've probably seen the word "headless" thrown around in e-commerce circles and assumed it was for companies with six-figure dev budgets. That was my assumption too, right up until the moment I priced out a real setup for one of my own stores and realized the monthly bill was roughly the same as a mid-tier Shopify plan — without the transaction fees eating into every sale.
If you're running a small online store, or you're about to launch one and want a stack you can actually grow into, this tutorial walks you through a practical headless commerce setup for around $50 a month. No enterprise contract required.
What "Headless" Actually Means (Plain English)
A traditional platform like a basic Shopify or WooCommerce install bundles the storefront (what shoppers see) and the backend (products, orders, inventory) into one package. Headless splits them apart. Your backend — often called a "headless CMS" or commerce API — handles data. A separate frontend, usually built with a JavaScript framework, handles what customers actually see and click.
Why does that split matter to you? Three reasons:
- Speed. Frontends built with frameworks like Next.js or Astro serve pre-rendered pages that load in under a second. Google's Core Web Vitals data consistently shows that a one-second delay in page load drops conversions by roughly 7%. Faster pages mean more sales.
- Flexibility. You're not locked into a theme marketplace. You control every pixel.
- Cost at scale. Once the frontend is built, adding a second storefront — a wholesale portal, a regional site — costs almost nothing extra on the backend.
The catch? You need to assemble the pieces yourself. That's what this tutorial is for.
The $50/Month Stack That Actually Works
Here's the combination I'd use today if I were starting from scratch with a modest budget:
| Layer | Tool | Monthly Cost |
|---|---|---|
| Commerce backend (products, cart, checkout) | Medusa.js (self-hosted) | ~$7 (a $6 DigitalOcean droplet + $1 managed DB on free tier) |
| Frontend framework | Next.js (open source) | $0 |
| Frontend hosting | Vercel Hobby → Pro | $0–$20 |
| CMS for blog/content | Sanity.io (free tier) | $0 |
| Search | Meilisearch (self-hosted) | ~$6 (same droplet) |
| Email (transactional) | Resend | $0–$20 (free up to 3,000/month) |
| Total | ~$13–$53 |
You can trim this further or swap individual pieces. The point is that none of these tools lock you into a single vendor, and each one has a generous free tier to get you moving.
Step 1: Spin Up Your Medusa Backend
Medusa is an open-source commerce engine — think of it as the brains of your store. It handles products, variants, inventory, carts, and orders through a REST API that your frontend can call.
Do this today:
- Create a $6/month DigitalOcean droplet (Ubuntu 22.04, 1 GB RAM is fine to start).
- SSH in and run the Medusa CLI setup:
npm install -g @medusajs/medusa-cli
medusa new my-store
cd my-store
medusa develop
- Point a subdomain like
api.yourstore.comto that droplet using an A record in your DNS settings. This keeps your API separate from your storefront URL.
The whole process takes about 25 minutes if you've used a terminal before, maybe 45 if you haven't. Medusa's docs are genuinely good — they have a step-by-step deployment guide that matches this flow almost exactly.
One thing to configure right away: set your STORE_CORS environment variable to your frontend domain so browsers don't block API requests. It's a five-second edit in your .env file, but people skip it and then spend an hour debugging.
Step 2: Build Your Next.js Storefront
Next.js is the frontend layer — the part your customers see. Vercel (the company behind Next.js) maintains an official Medusa starter template that connects to your backend out of the box.
Do this today:
- Clone the Medusa Next.js starter:
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa
- Open
.env.localand pointNEXT_PUBLIC_MEDUSA_BACKEND_URLto yourapi.yourstore.comsubdomain. - Run
npm run devlocally. You should see a working storefront pulling products from your Medusa backend.
The starter includes a product listing page, a product detail page, a cart drawer, and a checkout flow. For most small stores, that's 80% of what you need on day one.
Want to know what's genuinely fun about this step? You can open the app/ folder and start editing components immediately. Change a font, adjust the layout, add a banner — it's just React. No theme editor with locked sections, no premium plugin to unlock a feature you need.
Step 3: Deploy the Frontend for Free (or Close to It)
Vercel's Hobby plan is free and handles Next.js deployments beautifully. Push your repo to GitHub, connect it to Vercel, and every git push to your main branch triggers a new deployment automatically.
The free plan covers personal/hobby projects. If you're running a commercial store, Vercel's terms ask you to upgrade to the $20/month Pro plan. That's still reasonable — you get preview deployments, better analytics, and no bandwidth anxiety.
Quick tip: Set up a preview deployment for a staging branch. Before you push any changes live, you can share a preview URL with a friend or a test customer and get real feedback. I wish I'd done this on my first store instead of pushing half-finished changes straight to production.
Step 4: Add Content Without a Separate CMS Bill
If your store has a blog, a lookbook, or any editorial content, you don't want that living inside your commerce backend. Sanity.io's free tier gives you a full headless CMS — structured content, an easy editor interface, and a CDN-backed API — at no cost for small projects.
Connecting Sanity to your Next.js frontend takes about 30 minutes:
- Run
npm create sanity@latestinside your project. - Define a simple schema (a
posttype withtitle,slug,body, andpublishedAtfields covers a basic blog). - Fetch posts in Next.js using the
next-sanitypackage and render them on a/blog/[slug]route.
Now your marketing team (even if that's just you) can publish content without touching code, and your developers can update the storefront without worrying about breaking blog posts.
A Real Example: How a Candle Brand Cut Its Platform Fees by 60%
A maker I know was running her candle store on a mid-tier Shopify plan at $79/month, plus $0.20 per transaction on her payment processor (she wasn't on Shopify Payments because she's based outside the US). Between the plan and transaction fees on roughly 200 orders a month, she was paying around $119/month just to keep the lights on.
She migrated to a Medusa + Next.js + Vercel stack over a long weekend — she's comfortable with code, so it was about 12 hours of actual work. Her new monthly costs: $27 (droplet, Pro Vercel plan, Resend). That's a 77% reduction. She reinvested the savings into a small Google Ads budget and saw a 22% lift in new customer acquisition over the following quarter.
Her store isn't flashier than before. It's actually simpler. But it loads in 0.8 seconds on mobile, and she owns every part of it.
Common Mistakes to Skip
Skipping a staging environment. Pushing directly to production feels fine until you break checkout on a Friday afternoon. Set up that staging branch on day one.
Using a shared droplet for everything. Your Medusa backend and your Meilisearch instance can share a droplet at low traffic, but once you're doing 500+ orders a month, give each service its own server. A $6 droplet handles about 50 concurrent API requests comfortably — benchmark before you scale.
Ignoring image optimization. Next.js has a built-in <Image> component that automatically serves WebP and resizes images for different screen sizes. Use it for every product image. It's one line of code and it meaningfully improves your Core Web Vitals score.
Not setting up a CDN for Medusa assets. By default, Medusa stores uploaded images locally on your droplet. Connect it to an S3-compatible bucket (Cloudflare R2 is free up to 10 GB) so your images are served from a CDN edge, not your little $6 server.
You're More Ready Than You Think
Headless commerce has a reputation for being complicated, and I won't pretend the initial setup is as simple as clicking "install" on a hosted platform. But the gap between "complicated" and "impossible" is a lot smaller than the marketing around enterprise headless tools would have you believe.
If you can follow a tutorial, run a few terminal commands, and push code to GitHub, you can have a working headless storefront live this weekend. The stack above costs less than a dinner out for two, and it scales with you from your first 10 orders to your first 10,000 without forcing you to renegotiate a contract or switch platforms.
Your next step: spin up a free Medusa project locally today — no droplet needed yet, just your laptop — and browse through the admin panel. Get a feel for how products and orders are structured before you commit to deploying anything. Thirty minutes of exploring will answer half the questions you have right now.
You've got this.