Project Structure

Recommended folder structure for a DashForDevs storefront.

Updated September 8, 2026

On this page

Recommended Project Structure

my-storefront/
  app/
    layout.tsx              # Root layout with global data
    page.tsx                # Home page
    products/
      page.tsx              # Product listing
      [slug]/page.tsx       # Product detail
    category/
      [slug]/page.tsx       # Category page
    cart/page.tsx            # Cart page
    checkout/page.tsx        # Checkout flow
    account/
      page.tsx              # Customer dashboard
      orders/
        page.tsx            # Order history
        [id]/page.tsx       # Order detail
    blog/
      page.tsx              # Blog listing
      [slug]/page.tsx       # Blog post
    sitemap.ts              # Dynamic sitemap
  lib/
    dash.ts                 # Public client (pk_*)
    dash-server.ts          # Server client (sk_*)
  components/
    ProductCard.tsx
    CartDrawer.tsx
    VariationPicker.tsx
    Header.tsx
    Footer.tsx
  .env.local                # API keys

Key Principles

Server components by default — Fetch data on the server for SEO and performance
Client components for interactivity — Cart, auth, and real-time features
Two client instances — Public (browser-safe) and server (full access)
Core + Options split — Load product data in two phases for faster page loads

Next Steps

Server vs Client — When to use each
Data Fetching — Fetching patterns
Installation — Setting up the SDK

A second storefront against the same backend is a second key rather than a second project. How the isolation works goes through it.