AeroCart

Headless Architecture

⚛️

Main Site

Next.js Marketing App

⚡

🛍️

Checkout API

AeroCart

Implementation Guide

app/products/page.tsx

async function getProducts() {
  // Fetch from your deployed checkout domain
  const res = await fetch('https://checkout.yourdomain.com/api/products', { 
    next: { revalidate: 3600 } // ISR: Cache for 1 hour
  });
  
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <div className="grid grid-cols-3 gap-6">
      {products.map((product) => (
        <div key={product.id} className="border p-6 rounded-lg">
          <img src={product.image} alt={product.name} className="w-full mb-4" />
          <h2 className="text-xl font-bold">{product.name}</h2>
          <p className="text-gray-600 mb-4">{product.description}</p>
          
          {/* Link directly to checkout */}
          <a 
            href={`https://checkout.yourdomain.com/buy/${product.id}`}
            className="block w-full bg-blue-600 text-white text-center py-2 rounded"
          >
            Buy for ${`${product.price / 100}`}
          </a>
        </div>
      ))}
    </div>
  );
}

Common Patterns

ISR (Incremental Static Regeneration)

Use { next: { revalidate: 3600 } } when fetching products. This caches your product data on the edge, making your main site instant while keeping pricing up to date.

Dynamic Routes

Create a [slug]/page.tsx on your main site that fetches specific product details from /api/products/:id based on the URL parameter.

Ready to Build?

You have the architecture. Now build the frontend of your dreams.