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. Shoppers add products in the browser, review an order summary, then open WhatsApp with that summary pre-filled. They must still choose to send it, so this is an order inquiry or handoff—not payment, an inventory reservation, or a confirmed order.

How the static-store WhatsApp cart works

1. Next.js renders product pages into static files during the build.
2. A client component lets shoppers add items, change quantities, and review a cart in the browser.
3. The component turns the cart into a message and URL-encodes it in a WhatsApp click-to-chat link.
4. The shopper reviews the pre-filled message in WhatsApp and sends it to the seller.

WhatsApp documents click-to-chat at https://faq.whatsapp.com/5913398998672934. Its pre-filled text appears in the chat input; opening the link does not itself send a message.

#	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

As an Amazon Associate I earn from qualifying purchases.

Configure Next.js for static export

In next.config.js, set output: 'export':

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
};

module.exports = nextConfig;

Run next build to generate static route HTML and application assets in the out directory. The result can be served by a static web server. See the Next.js guide, last updated August 25, 2026: https://nextjs.org/docs/app/guides/static-exports.

Keep product data available at build time where practical. A client component can manage cart interactions, but Next.js prerenders Client Components during the build too. Do not read window, localStorage, or navigator during that prerender; use browser-only APIs only after code is running in the browser. Persisting the cart in localStorage is optional, not a requirement for a working handoff.

#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

Build the cart and WhatsApp message

Keep cart state in a client component

Create a client component for add-to-cart buttons, quantity controls, removal, and the summary. A minimal data shape might be { id, name, price, quantity }. Use a stable product identifier so quantity changes update the intended item rather than creating accidental duplicates. Display the item names, quantities, prices, and total before the shopper leaves the store.

Format the seller’s number correctly

Use the seller’s full international number with the country code, digits only. WhatsApp’s documented wa.me format omits the plus sign, a domestic leading zero used for formatting, spaces, brackets, and dashes. For example, store the configured number in a variable such as phoneDigits; do not derive it from user input.

Encode the whole message

Build readable text from the cart and pass the complete message through encodeURIComponent. Encoding the entire string safely represents spaces, line breaks, currency symbols, and punctuation in the URL.

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

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

Render the result as a real link so shoppers can activate it with a mouse, keyboard, or touch:

<a href={href}>Send order inquiry in WhatsApp</a>

WhatsApp documents the number and pre-filled text URL format, and says click-to-chat works on a phone and WhatsApp Web. The message is placed in the chat field for the customer to inspect and send: https://faq.whatsapp.com/5913398998672934.

What this implementation does—and does not—confirm

A static site plus a WhatsApp link can present a cart summary and hand it to the customer for messaging. It does not, by itself, create a trusted order record, collect payment, verify customer identity, check current inventory, reserve stock, or guarantee delivery. The seller needs to confirm the request and explain when an order becomes accepted.

Next.js static export does not support request-dependent features such as dynamic request handling through Route Handlers or Server Actions. If the business needs authoritative payment, order persistence, inventory checks, or fulfillment automation, add a backend or commerce service designed to provide those capabilities; do not treat the static export as an order-processing endpoint. The relevant platform boundary is documented in the Next.js static export guide.

Choose the right checkout model

The commerce column describes capabilities that require a suitable implementation; a provider’s inclusion of any feature is not guaranteed merely by choosing this model.

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.