How to Build a WhatsApp Cart for a Static Next.js Store

You can build a WhatsApp cart for a static Next.js store with a client-side cart and a click-to-chat link. The shopper adds products, reviews the summary on your site, then opens WhatsApp with a pre-filled message to inspect and send. This is an order inquiry or handoff—not a payment, confirmed order, or inventory reservation.

What the WhatsApp cart does—and what it does not

A static storefront can show product information and manage a cart in the shopper’s browser. At checkout, it can turn the cart into a message and pass that message to WhatsApp. The buyer must still choose to send it, and the seller handles confirmation and any payment separately.

#	Preview	Product	Price
1		Next.js O Guia Definitivo do Zero ao Deploy: Domine o App Router, Server Components e Crie...	$3.86	Buy on Amazon

Choose the handoff when chat-based order discussions are acceptable. If you need trusted payment, recorded orders, stock checks, or fulfillment automation, pair the storefront with a backend or commerce provider and define clearly when an order becomes confirmed.

Set up the static Next.js export

Next.js static export generates HTML files for routes and an out directory containing application assets. Configure output: 'export' in next.config.js, then build the application with next build. The resulting files can be served by a web server that serves HTML, CSS, and JavaScript. See the Next.js static export guide, last updated August 25, 2026.

#1 Best Overall

Next.js O Guia Definitivo do Zero ao Deploy: Domine o App Router, Server Components e Crie Aplicações Full-Stack de Alta Performance (Portuguese Edition)

$3.86

Buy on Amazon

Product pages can be rendered at build time, while a Client Component handles cart interactions in the browser. However, Client Components are also prerendered during the build. Do not read window or localStorage during that prerender; access browser APIs only in browser-running code. The Next.js guide also lists request-dependent Route Handlers and Server Actions among features unsupported by static exports, so the export itself cannot receive and process a dynamic order submission.

Build the browser-side cart

Keep product data available to the storefront and use a Client Component for actions such as adding an item, removing it, and changing its quantity. Render a visible summary with item names, quantities, prices, and a total before the shopper leaves for WhatsApp. The summary lets the shopper catch mistakes before opening the chat.

Persisting the cart between visits with localStorage is optional. If you add it, access it only in browser-safe code because it is unavailable during server prerendering. A cart kept only in component state is simpler, but does not persist across page reloads.

Create the click-to-chat link

WhatsApp’s click-to-chat format is https://wa.me/<number>. Use the seller’s full international phone number as digits only: leave out the plus sign, formatting zeroes, spaces, brackets, and dashes. To prefill a message, add it as a URL-encoded text parameter. WhatsApp places the text in the chat input; it does not send the message automatically. Click-to-chat can open on a phone or WhatsApp Web. See WhatsApp’s click-to-chat instructions.

For example, a client-side component can construct a message from the current cart and encode the complete message:

const message = cartItems
  .map(({ name, quantity, price }) => `${quantity} × ${name} — ${price}`)
  .join('n');

const href = `https://wa.me/${phoneDigits}?text=${encodeURIComponent(message)}`;

Set phoneDigits to the seller’s country code plus number, with digits only. Build the message from the cart data, then pass the whole string to encodeURIComponent rather than trying to escape individual characters. Render the resulting URL as a normal anchor or a button-styled anchor so activating it navigates to WhatsApp.

Connect the pieces

1. Render the catalog: include product data in the static build and show product pages or a listing.
2. Manage cart changes in a Client Component: implement add, remove, and quantity controls in the browser.
3. Show the shopper the summary: display chosen items, quantities, prices, and total on the site.
4. Build the message and link: format the current cart as readable text and URL-encode it in the text parameter of the WhatsApp link.
5. Let the shopper send it: WhatsApp opens with the message ready for review; the shopper chooses whether to send it.

When a static handoff is not enough

A pre-filled WhatsApp message does not establish that the seller received an order, captured payment, or reserved stock. For a reliable order record, payment processing, inventory checks, or fulfillment automation, add a backend or commerce service that supports those requirements. A static export can still serve as the storefront, but dynamic order processing must be handled outside the exported files.

Quick Recap

Bestseller No. 1

Next.js O Guia Definitivo do Zero ao Deploy: Domine o App Router, Server Components e Crie Aplicações Full-Stack de Alta Performance (Portuguese Edition)

$3.86

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.