Configure environment variables and project structure.
Updated
Before building with DashForDevs, make sure your development environment meets these requirements:
node --versionIf you are starting fresh, scaffold a new Next.js app:
npx create-next-app@latest my-storefront --typescript --tailwind --app
cd my-storefront
Add the DashForDevs SDK to your project:
npm install github:CodeCraftStudios/dash4devs-sdk
See the full Installation guide for yarn/pnpm alternatives.
Create a .env.local file in your project root with your API keys:
# Public key — safe for client-side code
NEXT_PUBLIC_DASH4DEVS_API_KEY=pk_live_your_public_key_here
# Secret key — server-side ONLY
DASH4DEVS_SECRET_KEY=sk_live_your_secret_key_here
NEXT_PUBLIC_. This would expose it to the browser. The SDK will throw an error if it detects this misconfiguration.
Create two client files — one for public operations, one for server-side:
// lib/dash.ts — Public client (browser-safe)
import { DashClient } from "dash4devs"
export const dash = new DashClient({
apiKey: process.env.NEXT_PUBLIC_DASH4DEVS_API_KEY!,
})
export default dash
// lib/dash-server.ts — Server client (API routes, server components only)
import { DashClient } from "dash4devs"
export const dashServer = new DashClient({
apiKey: process.env.DASH4DEVS_SECRET_KEY!,
})
Test that everything is wired up:
import dash from "@/lib/dash"
const { products } = await dash.products.list()
console.log(`Found ${products.length} products`)
If you see your products logged, your environment is ready.
Your environment is set up. Continue to the Quick Start guide to build your first page, or review Common Patterns for best practices.