Next.js Commerce: A High-Performance Ecommerce Starter

Why This Matters

Building a fast, scalable ecommerce site is hard. Between performance optimizations, server-side rendering, and cart logic, there’s a lot to juggle. Enter Next.js Commerce—a server-rendered ecommerce template from Vercel that leverages the latest Next.js features (App Router, Server Actions, React Server Components) to give you a production-ready foundation. With 12.7k GitHub stars and active maintenance, it’s a solid starting point for developers who want to skip the boilerplate.

What It Does

Next.js Commerce is a customizable ecommerce template built with:

• Next.js App Router: Server-rendered routes with built-in caching.
• React Server Components: Efficient data fetching and streaming.
• Optimistic UI: Instant cart/state updates via useOptimistic.
• Multi-provider support: Shopify (officially maintained), with community forks for BigCommerce, Swell, and others.

The demo (demo.vercel.store) showcases a clean, performant storefront with product pages, cart functionality, and search—all pre-wired.

Why It’s Cool

1. Performance-first: Uses Suspense for incremental loading and edge caching.
2. Modern React patterns: Server Actions for mutations (no API routes needed), RSC for less client-side JS.
3. Easy customization: Swap providers or UI without rewriting core logic.
4. Optimistic cart: Updates feel instant, even before server confirmation.

How to Try It

1. Deploy instantly:

   npx create-next-app -e https://github.com/vercel/commerce  
   

   Or use the Vercel one-click deploy.

2. Run locally:

   pnpm install && pnpm dev  
   

3. Connect a provider: Defaults to Shopify, but you can fork and adapt others (WIP for non-Shopify options).

Final Thoughts

Next.js Commerce is a pragmatic choice if you’re building an ecommerce site and want to avoid reinventing the wheel. It’s not a zero-config solution—you’ll need to tweak it for your use case—but it’s miles ahead of rolling your own. The Shopify integration is particularly polished, but keep an eye on community forks if you need other backends.

Pro tip: Check out the useOptimistic cart updates—it’s a masterclass in smooth UX.

Explore the repo →