Back to Templates
Built with standard Next.js patterns and typed commerce APIs. AI coding tools like Cursor and Copilot are more effective when the codebase is consistent and the APIs are well-defined.
Quick Start
Open localhost:3000 — your store is running.
Why AI Coding Tools Work Better Here
| Familiar patterns | Idiomatic Next.js App Router code (Server Components, Server Actions, "use cache") matches what LLMs have seen thousands of times. Less guessing, more accurate suggestions. |
| Typed APIs | Commerce Kit SDK methods like productBrowse() and cartUpsert() have defined input/output shapes. LLMs write correct code when they know the contracts. |
| Bounded domain | Commerce is well-defined: products, variants, carts, checkout. The data models already exist with clear types - no need for the LLM to invent them. |
Tech Stack
- Next.js 16 – App Router, React Server Components, React Compiler
- Bun – Fast JavaScript runtime and package manager
- Commerce Kit SDK – Headless commerce API integration
- Tailwind CSS v4 – Modern utility-first styling
- Shadcn UI – Accessible component library with Radix UI primitives
- Biome – Lightning-fast linter and formatter
- TypeScript – Type-safe development
Prerequisites
- Node.js 20+ (works on 18, 20, 22)
- Bun 1.0+ (compatible with npm/yarn)
- YNS API key from yns.app/admin
Environment Variables
Copy .env.example to .env.local and set:
YNS_API_KEY– Your API token from the admin panelNEXT_PUBLIC_ROOT_URL– Your store URL (e.g.,http://localhost:3000)
Next steps
Refer to the documentation found at yns.app/admin/api/endpoints for more information on how to fetch products or create carts in your store.
