DEV Community

Milton Mahmud
Milton Mahmud

Posted on

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

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

  1. Sign up at cartvelly.com and create your first store.
  2. Add a few products from the dashboard — name, price, images, and stock.
  3. 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}`);
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

Step 6 — Track shipments 

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

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.

Top comments (0)