You've probably seen the word "headless" thrown around in e-commerce circles and assumed it was for companies with a six-figure dev budget and a team of engineers on retainer. That assumption is understandable — most of the case studies you read feature brands doing $10M+ a year. But here's the thing: the tooling has quietly gotten cheap enough that a solo operator running a $200K/year store can actually pull this off for roughly what you'd spend on a mid-tier Shopify plan.
This tutorial walks you through building a headless storefront on a real $50/month ceiling. No VC runway required.
What "Headless" Actually Means (Plain English)
A traditional e-commerce setup bundles your storefront — the pages your customers see — with your backend — the cart, inventory, checkout logic. They're one thing. When something in the backend changes, it can ripple into your design, and vice versa.
Headless separates those two layers. Your backend (often called a "commerce API" or "headless commerce engine") handles products, orders, and payments. Your frontend is a completely independent website — built however you like — that talks to the backend through an API (a structured way for two software systems to exchange data).
Why does that matter to you? Three reasons that show up in your analytics:
- Speed. Storefronts built with modern JavaScript frameworks like Next.js routinely score 90+ on Google PageSpeed. A one-second improvement in load time has been linked to 7% more conversions in multiple studies.
- Flexibility. You can redesign your storefront without touching your order management or inventory at all.
- Portability. If you want to switch your commerce backend next year, your frontend stays put. No full migration panic.
The $50/Month Stack That Actually Works
Here's a real budget breakdown, not a theoretical one:
| Layer | Tool | Monthly Cost |
|---|---|---|
| Commerce backend | Medusa.js (self-hosted on Railway) | ~$5–10 |
| Frontend framework | Next.js (free, open-source) | $0 |
| Frontend hosting | Vercel Hobby → Pro | $0–20 |
| Database | PostgreSQL on Railway | included above |
| Search | Meilisearch on Railway | ~$5 |
| Payments | Stripe (transaction fees only) | $0 fixed |
| CDN / media | Cloudflare free tier + Cloudinary free tier | $0 |
| Total | ~$10–35/month |
You've got $15–40 left in your $50 ceiling for a domain, email, or a paid plugin if you need one. That's a real, production-capable stack — not a toy.
Why Medusa.js? It's open-source, actively maintained (30,000+ GitHub stars as of mid-2025), and ships with a REST API and a JavaScript SDK out of the box. You're not locked into any vendor's pricing model. If your store grows past what Railway can handle, you move the container to a bigger host. Your frontend doesn't care.
Step 1: Spin Up Your Commerce Backend in Under an Hour
If you've never touched a terminal, this part will feel slightly unfamiliar — but it's more copy-paste than it is programming. Here's the sequence:
- Create a free Railway account at railway.app. Railway is a platform that runs your backend in the cloud without you managing servers.
- Deploy the Medusa starter using Railway's one-click template. Search "Medusa" in the Railway template gallery. It provisions a Node.js server and a PostgreSQL database automatically.
- Set your environment variables. Railway's dashboard has a "Variables" tab. You'll need to add:
DATABASE_URL(Railway fills this in automatically)JWT_SECRET(make up a long random string)COOKIE_SECRET(same)STRIPE_API_KEY(from your Stripe dashboard under Developers → API Keys)
- Run the seed command from Railway's terminal tab:
medusa seed. This populates your store with sample products so you have something to look at immediately. - Open your Railway-assigned URL +
/store/productsin a browser. You should see a JSON response listing products. That's your API working.
Total time: 30–45 minutes on a first attempt. Faster on a second store.
Step 2: Build Your Storefront with Next.js
Next.js is a React-based framework (React is a popular JavaScript library for building interfaces) that's become the default choice for headless storefronts because it handles both fast static pages and dynamic data fetching cleanly.
The Medusa team maintains an official Next.js starter storefront on GitHub (search "medusa-next-js-starter"). Clone it locally:
git clone https://github.com/medusajs/nextjs-starter-medusa
cd nextjs-starter-medusa
npm install
Open the .env.local file and point NEXT_PUBLIC_MEDUSA_BACKEND_URL at your Railway URL from Step 1. Then run npm run dev and visit localhost:3000. You'll see a working storefront — product listing, product detail pages, cart, and checkout — all talking to your own backend.
At this point you have a fully functional headless store running entirely on your laptop. The next move is getting it live.
Step 3: Deploy Your Frontend to Vercel
Vercel is the company behind Next.js, so the two work together with almost no configuration friction.
- Push your storefront code to a GitHub repository (GitHub is free for public and private repos).
- Go to vercel.com, create an account, and click "Add New Project."
- Import your GitHub repo. Vercel detects Next.js automatically and sets the build settings for you.
- Add your environment variable (
NEXT_PUBLIC_MEDUSA_BACKEND_URL) in Vercel's project settings under "Environment Variables." - Click Deploy. Vercel builds your site and gives you a live URL in about 90 seconds.
Vercel's free Hobby tier handles up to 100GB of bandwidth per month — plenty for a store doing under $500K/year in revenue. If you cross that threshold, the Pro plan at $20/month is still inside your budget ceiling.
Every time you push a code change to GitHub, Vercel rebuilds and redeploys automatically. No FTP, no manual uploads.
A Quick Real-World Example
Let me make this concrete. Imagine you sell hand-poured candles — call the store Wickline. You're on Shopify Basic at $39/month, and your theme is starting to feel generic. You want faster pages and more design control, but you can't justify a $300/month Shopify Plus plan or a custom agency build.
You follow the steps above over a weekend. Your Railway backend runs at about $8/month. Your Vercel frontend is free. You customize the Next.js starter template — change fonts, adjust the product card layout, add a homepage banner — without touching a single line of backend code. Your Google PageSpeed score goes from 61 (your old Shopify theme) to 94. Over the next 60 days, your conversion rate climbs from 2.1% to 2.7% — that's a 28% lift on the same traffic. At $15 average order value and 800 monthly sessions, that's roughly $720 more revenue per month from a stack that costs you $8.
Is every store going to see those exact numbers? No. But faster pages consistently outperform slower ones, and that's been true across enough stores that it's worth taking seriously.
Three Things to Do Before You Go Live
Before you point your real domain at this stack, run through this short checklist:
1. Test your checkout end-to-end with a real Stripe test card. Stripe gives you test card numbers (4242 4242 4242 4242 works for a basic success case). Place an order, confirm it shows up in your Medusa admin panel, and confirm Stripe logs the payment. Do this three times with different scenarios: a successful payment, a declined card, and a cart with a discount code.
2. Set up basic monitoring. Railway and Vercel both have built-in logs, but add a free UptimeRobot monitor (uptimerobot.com) that pings your storefront URL every 5 minutes and emails you if it goes down. Takes 3 minutes to configure and has saved me from sleeping through outages more than once.
3. Configure your custom domain. In Vercel's project settings, go to "Domains" and add your domain. Vercel walks you through the DNS changes. It also provisions an SSL certificate automatically — your store gets HTTPS at no extra cost.
Once those three are done, you're in production.
What This Setup Can't Do (Yet)
Being straight with you: this stack has real trade-offs.
- No drag-and-drop page builder. If you want to rearrange your homepage without touching code, you'll need to add a headless CMS like Sanity (free tier available) or Contentful. That's a future tutorial.
- Medusa's plugin ecosystem is smaller than Shopify's. Loyalty programs, advanced subscriptions, and some regional payment methods require more custom work or third-party integrations.
- You're responsible for updates. Medusa releases updates regularly. You'll need to pull them into your project every month or two. It's a 20-minute task, not a crisis, but it's yours to own.
If those trade-offs feel manageable — and for most stores doing under $1M/year, they are — the flexibility and cost savings are worth it.
Your Next Step
You don't have to migrate your whole store this weekend. Here's a low-stakes way to start: spin up the Medusa backend on Railway today (it's free to try), connect the Next.js starter, and just poke around. Get a feel for how the API works, what the admin panel looks like, and whether the developer experience clicks for you.
If it does, you'll have a staging environment ready to build on. If it doesn't, you've spent a Saturday afternoon and $0.
Headless commerce used to be a luxury. At $10–35/month, it's starting to look a lot more like a practical choice for stores like yours. You've got the tools — go build something.