Developer Documentation

Why SceneSKU?

Every e-commerce developer faces the same friction: client demos look unprofessional with placeholder data, and sourcing real product content is time-consuming, legally ambiguous, and category-inconsistent.

• ✓8 professionally art-directed lifestyle images per pack, AI-generated with commercial license
• ✓Structured product data: titles, descriptions, pricing, tags, bullet points, options
• ✓Category-specific packs: Women's Fashion, Men's Fashion, Beauty & Skincare, Home & Living, Pet Supplies, and more
• ✓JSON and CSV export — drop directly into your database seed scripts
• ✓Optimized for SEO: schema-ready product data with realistic copy
• ✓REST API compatible with any framework: Next.js, Nuxt, Remix, SvelteKit

Quick Start

Get your API key from scenesku.com and add it to your environment.

.env.local

# .env.local
SCENESKU_API_KEY=your_api_key_here

Fetch products in a Server Component

// app/products/page.tsx — Next.js 15 Server Component
import type { ScenePacksResponse } from "@/lib/types";

export const revalidate = 3600; // ISR: revalidate hourly

export default async function ProductsPage() {
  const res = await fetch(
    "https://api.scenesku.com/v1/scene-packs?category=womens-fashion&per_page=12",
    {
      headers: {
        Authorization: `Bearer ${process.env.SCENESKU_API_KEY}`,
        "Content-Type": "application/json",
      },
      next: { revalidate: 3600 },
    }
  );

  if (!res.ok) throw new Error("SceneSKU API error: " + res.status);

  const { data }: ScenePacksResponse = await res.json();

  return (
    <div className="grid grid-cols-4 gap-4">
      {data.map((pack) => (
        <article key={pack.id}>
          <img
            src={pack.images[0]?.watermark_url}
            alt={`${pack.product_data.product_title} — SceneSKU mock image`}
          />
          <h2>{pack.product_data.product_title}</h2>
          <p>{pack.product_data.price}</p>
        </article>
      ))}
    </div>
  );
}

Static generation with generateStaticParams

// app/products/[id]/page.tsx — SSG with generateStaticParams
export async function generateStaticParams() {
  const res = await fetch("https://api.scenesku.com/v1/scene-packs?per_page=100", {
    headers: { Authorization: `Bearer ${process.env.SCENESKU_API_KEY}` },
  });
  const { data } = await res.json();
  return data.map((pack: { id: string }) => ({ id: pack.id }));
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const res = await fetch(`https://api.scenesku.com/v1/scene-packs/${params.id}`, {
    headers: { Authorization: `Bearer ${process.env.SCENESKU_API_KEY}` },
  });
  const pack = await res.json();
  // ...render product detail
}