Add a shop to your Next.js site

Every Next.js ecommerce tutorial ends with API routes, a webhook handler, a database and a Stripe secret in your environment. That is the right design when the shop is the product. When the shop is a side door on a content site, AddTheShop replaces all of it with one client component.

The component

import { useEffect } from "react";

export default function Shop() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://addtheshop.com/shop.js";
    s.async = true;
    s.dataset.store = "pk_ats_YOUR_STORE_KEY";
    document.body.appendChild(s);
    return () => s.remove();
  }, []);
  return <div id="addtheshop" />;
}

Add "use client" at the top in the app router. Put it on /shop, and put buy buttons anywhere with data-addtheshop-buy="PRODUCT_ID".

What you do not build

No /api/checkout, no webhook route, no orders table, no Stripe SDK, no environment variables. Checkout is Stripe's hosted page on your Stripe account; orders are stored by AddTheShop and delivered by email, REST or MCP.

Server components and ISR

Fetch the catalogue from the storefront API in a server component if you want product pages rendered on the server and cached with ISR. Keep the actual purchase on our checkout endpoint so quantities and prices are validated against the database.

Managing it from your tools

Connect Claude, Cursor or ChatGPT to our MCP server and manage products from the same place you write code. Or use the merchant REST API with a secret key from a script.