next-template

Opinionated Next.js starter: App Router + TypeScript + Tailwind v4 (CSS-first @theme design tokens), a strict app/ = routes-only / components/ = UI / lib/ = data-and-utils structure, and docs-as-code (AGENTS.md, CLAUDE.md, DESIGN_SYSTEM.md).

The full recipe and rationale live in template.md.

Start a new project from this template

npx create-next-app@latest my-app -e https://github.com/codewithamoako/next-template
cd my-app
npm run dev

(Requires this repo to be public. Alternative: npx degit <your-username>/next-template my-app && cd my-app && npm install.)

After cloning — make it yours

1. Find-and-replace Site Name (layout metadata, Logo, Footer, page.tsx).
2. Replace the placeholder palette in app/globals.css @theme and mirror it in lib/tokens.ts.
3. Swap the fonts in app/fonts.ts if desired (exports/variables stay the same).
4. Fill in the product brief in AGENTS.md.
5. For each new route: app/<route>/page.tsx (composition-only) + components/<route>/ (sections) + lib/<route>-data.ts (copy).
6. Add required env vars to .env.example.

Structure

app/          Routes only — page/layout/route/not-found + globals.css + fonts.ts
components/   layout/ (chrome) · ui/ (primitives) · <route>/ (page sections)
lib/          cn.ts · tokens.ts · <route>-data.ts (typed copy)

House rules: AGENTS.md · Token reference: DESIGN_SYSTEM.md