Build a storefront page with the SDK

1. Install

The SDK is installed from GitHub (ask us for access to the repository):

Terminal

npm install github:CodeCraft-Studios-LLC/dashfordevs-sdk#v0.3.3

2. Environment

Terminal

# .env.local
NEXT_PUBLIC_DEVDASH_PUBLIC_KEY=pk_test_YOUR_PUBLIC_KEY
DEVDASH_SECRET_KEY=sk_test_YOUR_SECRET_KEY

Only variables starting with NEXT_PUBLIC_ reach the browser. The secret key must never be one of them; the SDK refuses to start if it finds an sk_ key in a NEXT_PUBLIC_ variable.

3. Two clients: server and browser

TypeScript

// lib/dash.server.ts: import only from server components and route handlers
import "server-only";
import { DashClient } from "dash4devs";
import { assertServerOnlyKey } from "dash4devs/security";

assertServerOnlyKey(process.env.DEVDASH_SECRET_KEY);
export const dash = new DashClient({ apiKey: process.env.DEVDASH_SECRET_KEY! });

TypeScript

// lib/dash.client.ts: safe in the browser
import { DashClient } from "dash4devs";
export const dash = new DashClient({ apiKey: process.env.NEXT_PUBLIC_DEVDASH_PUBLIC_KEY! });

4. A product list

TSX

// app/shop/page.tsx
import Link from "next/link";
import { dash } from "@/lib/dash.server";

export default async function Shop() {
  const { products } = await dash.products.list({ limit: 24, include: ["main_size"] });
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}><Link href={`/shop/${p.slug}`}>{p.name}</Link></li>
      ))}
    </ul>
  );
}

5. A product page

TSX

// app/shop/[slug]/page.tsx
import { notFound } from "next/navigation";
import { DashApiError } from "dash4devs";
import { DashImage } from "dash4devs/react";
import { dash } from "@/lib/dash.server";

export default async function Product({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  try {
    const { product } = await dash.products.getCore(slug);
    return (
      <article>
        <h1>{product.name}</h1>
        {product.main_image && <DashImage src={product.main_image} alt={product.name} width={800} />}
      </article>
    );
  } catch (e) {
    if (e instanceof DashApiError && e.status === 404) notFound();
    throw e;
  }
}

DashImage picks the right size from our CDN for each screen.

6. Ship it

New to the App Router? The Next.js documentation covers server components and data fetching in depth.

Deploy anywhere that runs Next.js, or on DashForDevs Cloud straight from GitHub. Before you go live, switch to live keys and add your domain under Developers → Allowed origins.

Next: How the platform works.

#1. Install

#2. Environment

#3. Two clients: server and browser

#4. A product list

#5. A product page

#6. Ship it

Keep reading