# Create Next.js app with App Router and TypeScript
npx create-next-app@latest my-wc-store 
  --typescript --app --tailwind --eslint --src-dir

cd my-wc-store

# Install WooCommerce REST API client and cart state manager
npm install @woocommerce/woocommerce-rest-api zustand

# Install type definitions
npm install -D @types/node

# Next.js WooCommerce setup: WooCommerce REST API credentials
NEXT_PUBLIC_WC_URL=https://your-store.com
WC_KEY=ck_your_consumer_key_here
WC_SECRET=cs_your_consumer_secret_here

# WooCommerce Store API for cart (no auth needed)
NEXT_PUBLIC_WC_STORE_API=https://your-store.com/wp-json/wc/store/v1

import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api'

// Server-only WooCommerce client for Next.js WooCommerce setup
// This file should ONLY be imported in Server Components or Route Handlers
export const wc = new WooCommerceRestApi({
  url:            process.env.NEXT_PUBLIC_WC_URL!,
  consumerKey:    process.env.WC_KEY!,
  consumerSecret: process.env.WC_SECRET!,
  version:        'wc/v3',
})

export interface WCProduct {
  id:          number
  name:        string
  slug:        string
  price:       string
  regular_price: string
  sale_price:  string
  description: string
  short_description: string
  images:      Array<{ id: number; src: string; alt: string }>
  categories:  Array<{ id: number; name: string; slug: string }>
  stock_status: 'instock' | 'outofstock' | 'onbackorder'
}

export interface WCCategory {
  id:    number
  name:  string
  slug:  string
  count: number
  image: { src: string; alt: string } | null
}

// Typed fetch helpers for Next.js WooCommerce setup Server Components
export async function getProducts( params = {} ): Promise<WCProduct[]> {
  const { data } = await wc.get( 'products', { per_page: 24, status: 'publish', ...params })
  return data
}

export async function getProduct( slug: string ): Promise<WCProduct | null> {
  const { data } = await wc.get( 'products', { slug })
  return data[0] ?? null
}

export async function getCategories(): Promise<WCCategory[]> {
  const { data } = await wc.get( 'products/categories', { per_page: 100, hide_empty: true })
  return data
}

import { getProduct, getProducts } from '@/lib/woocommerce'
import { notFound }                from 'next/navigation'
import type { Metadata }           from 'next'

// ISR revalidation interval for Next.js WooCommerce setup product pages
export const revalidate = 3600  // re-fetch from WooCommerce every hour

// Generate static paths at build time for the Next.js WooCommerce setup
export async function generateStaticParams() {
  const products = await getProducts({ per_page: 100 })
  return products.map( p => ({ slug: p.slug }) )
}

// Dynamic metadata for SEO in the Next.js WooCommerce setup
export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const product = await getProduct( params.slug )
  if ( ! product ) return {}
  return {
    title:       product.name,
    description: product.short_description.replace( /<[^>]+>/g, '' ).slice( 0, 160 ),
    openGraph: {
      images: product.images[0] ? [{ url: product.images[0].src }] : [],
    },
  }
}

export default async function ProductPage(
  { params }: { params: { slug: string } }
) {
  const product = await getProduct( params.slug )
  if ( ! product ) notFound()

  return (
    <main className="max-w-4xl mx-auto px-4 py-12">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
        <img
          src={product.images[0]?.src}
          alt={product.images[0]?.alt || product.name}
          className="rounded-xl w-full object-cover"
        />
        <div>
          <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
          <p className="text-2xl font-semibold text-emerald-600 mb-6">
            £{parseFloat( product.price ).toFixed(2)}
          </p>
          <div
            className="prose mb-8"
            dangerouslySetInnerHTML={{ __html: product.short_description }}
          />
          {/* Cart button — client component handles add to cart */}
          <AddToCartButton productId={product.id} />
        </div>
      </div>
    </main>
  )
}

'use client'
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface CartItem { id: number; name: string; price: number; quantity: number; image: string }
interface CartStore {
  items:     CartItem[]
  addItem:   ( item: Omit<CartItem, 'quantity'> ) => void
  removeItem:( id: number ) => void
  updateQty: ( id: number, qty: number ) => void
  total:     () => number
  count:     () => number
}

// Zustand cart store for Next.js WooCommerce setup
export const useCart = create<CartStore>()(
  persist(
    ( set, get ) => ({
      items: [],
      addItem: ( item ) => set( state => {
        const existing = state.items.find( i => i.id === item.id )
        if ( existing ) {
          return { items: state.items.map( i =>
            i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
          )}
        }
        return { items: [ ...state.items, { ...item, quantity: 1 } ] }
      }),
      removeItem: ( id ) => set( s => ({ items: s.items.filter( i => i.id !== id ) })),
      updateQty:  ( id, qty ) => set( s => ({
        items: qty <= 0
          ? s.items.filter( i => i.id !== id )
          : s.items.map( i => i.id === id ? { ...i, quantity: qty } : i )
      })),
      total: () => get().items.reduce( ( s, i ) => s + i.price * i.quantity, 0 ),
      count: () => get().items.reduce( ( s, i ) => s + i.quantity, 0 ),
    }),
    { name: 'wc-cart' }
  )
)

# Deploy Next.js WooCommerce setup to Vercel
npm install -g vercel
vercel

# Set production environment variables (server-only credentials)
vercel env add WC_KEY        production
vercel env add WC_SECRET     production

# Trigger on-demand ISR revalidation when WooCommerce products update
# Add this webhook in WooCommerce: Settings Webhooks
# URL: https://your-site.vercel.app/api/revalidate?secret=YOUR_SECRET
# Topic: Product updated