Build a Full eCommerce Store with Next.js + Cartvelly in 10 Minutes

Milton Mahmud — Mon, 27 Apr 2026 15:22:30 +0000

No server setup. No backend code. Just paste an API link and start selling.

Introduction

Every time you build an eCommerce project for a client, you probably spend days setting up the backend — products, orders, payments, inventory, shipping. Then you do it all over again for the next client.

Cartvelly fixes this. It's a headless eCommerce CMS that gives you a fully managed backend via a simple REST API. You bring the frontend — React, Next.js, Vue, anything — and Cartvelly handles everything else.

In this tutorial, we'll build a working product listing page with cart and checkout using Next.js and Cartvelly's API.

Cartvelly has a free plan with no credit card required. Sign up at cartvelly.com to follow along.

What we'll build

A Next.js storefront that fetches and displays products from Cartvelly, supports a shopping cart, handles checkout via Stripe or PayPal, and tracks orders — all without writing a single line of backend code.

Step 1 — Set up your Cartvelly store

Sign up at cartvelly.com and create your first store.
Add a few products from the dashboard — name, price, images, and stock.
Copy your API Key and Store ID from settings.

Step 2 — Create a Next.js project

npx create-next-app@latest my-store
cd my-store
npm install axios

Create a .env.local file:

NEXT_PUBLIC_API_URL=https://client.cartvelly.com/api/stores
NEXT_PUBLIC_STORE_ID=your_store_id
NEXT_PUBLIC_API_KEY=your_api_key

Step 3 — Fetch products from Cartvelly

Create a reusable API client:

// lib/cartvelly.js
import axios from "axios";

const client = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    "x-api-key": process.env.NEXT_PUBLIC_API_KEY,
    "storeId": process.env.NEXT_PUBLIC_STORE_ID,
  },
});

export const getProducts = () => client.get("/products");
export const getProduct = (id) => client.get(`/products/${id}`);
export const getCategories = () => client.get("/categories");
export const getCoupon = (code) => client.get(`/coupons/code/${code}`);

Step 4 — Build the product listing page

// pages/index.js
import { getProducts } from "../lib/cartvelly";

export async function getServerSideProps() {
  const { data } = await getProducts();
  return { props: { products: data } };
}

export default function Home({ products }) {
  return (
    <div className="grid">
      {products.map((product) => (
        <div key={product._id} className="card">
          <img src={product.images[0]} alt={product.name} />
          <h3>{product.name}</h3>
          <p>${product.price}</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </div>
  );
}

Step 5 — Create an order with payment

Cartvelly supports three payment methods out of the box: /orders, /payments/stripe, and /payments/paypal.

const handleCheckout = async (cartItems, billing) => {
  const orderRes = await axios.post(
    `${process.env.NEXT_PUBLIC_API_URL}/orders`,
    { items: cartItems, billing, paymentMethod: "stripe" },
    { headers: { "x-api-key": "...", "storeId": "..." } }
  );

  const stripeRes = await axios.post(
    `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe`,
    { orderId: orderRes.data._id }
  );

  window.location.href = stripeRes.data.url;
};

Step 6 — Track shipments

const { data } = await client.get(`/shipments/${trackingNumber}`);

Full API reference at a glance

Method	Endpoint	Description
GET	/products	All products
GET	/categories	All categories
GET	/collections	Product collections
GET	/sliders	Homepage sliders
GET	/coupons/code/:code	Validate coupon
GET	/shippingZones?country=usa	Shipping rates
POST	/orders	Create order
POST	/reviews	Submit review
POST	/subscribers	Add subscriber

Why Cartvelly instead of building your own backend?

Building a custom eCommerce backend from scratch takes weeks — authentication, database design, payment integration, email automation, inventory tracking. Cartvelly gives you all of that instantly, so you can focus entirely on the frontend experience.

It works with any frontend framework, charges no transaction fees, and has a free plan to get started.

Conclusion

In this tutorial we connected a Next.js frontend to a fully featured eCommerce backend in minutes — products, payments, shipping, coupons — all via a simple REST API with no server setup required.

The free plan at cartvelly.com is a great way to try it out. If you build something with it, drop a link in the comments!

Found this useful? Follow for more eCommerce and Next.js tutorials.

DEV Community: Milton Mahmud