Storefront Overview

The YNS storefront template is a production-ready Next.js app for building your online store.

What is the Storefront?

The YNS storefront is an open-source Next.js application that serves as the customer-facing frontend for your store. It connects to the YNS platform via the Commerce SDK and provides:

• Product listing and detail pages
• Shopping cart with real-time updates
• Checkout powered by Stripe
• Collection and search pages
• Newsletter subscription
• Legal pages

Architecture

The storefront is built with modern React patterns:

app/
  page.tsx              # Home with featured products
  product/[slug]/       # Product detail pages
  collection/[slug]/    # Collection listings
  cart/                 # Cart sidebar and actions
  search/               # Search with pagination
  order/success/        # Post-checkout confirmation
  legal/[slug]/         # Terms, privacy, etc.
  newsletter/           # Newsletter signup action

Server Components

All data fetching happens in React Server Components. Pages use async components that fetch data directly from the YNS API:

export default async function ProductPage({ params }) {
  const { slug } = await params;
  const product = await commerce.productGet({ idOrSlug: slug });
  // Render product...
}

Cart Management

The cart uses a combination of React Context (for client-side state) and Server Actions (for mutations):

• cart-context.tsx — client-side cart state
• cart-sidebar.tsx — cart UI component
• actions.ts — Server Actions for add/remove/update

Tech Stack

• Next.js 16 (canary) with App Router
• React 19 with Server Components
• TypeScript with strict mode
• Tailwind CSS v4 for styling
• Commerce SDK for API access
• Radix UI + shadcn/ui for components
• Biome for linting and formatting