next-template

A tailored Next.js starter for shipping fast with AI-ready defaults. Deploys to Vercel with zero config or Cloudflare Workers with included configuration.

Stack

Framework

• Next.js 16 — App Router, React Compiler, Typed Routes, Cache Components, Partial Prefetching
• React 19
• TypeScript — strict mode + noUncheckedIndexedAccess

Styling & UI

• Tailwind CSS v4 — CSS-first config
• shadcn/ui — base-nova style, configured for on-demand component installs
• Base UI and lucide-react — base dependencies for generated shadcn components
• Geist — sans and mono font families
• next-themes — dark mode
• motion — animations

Data & State

• Zod — schema validation
• React Hook Form — forms
• Vercel AI SDK — AI integration core; add provider packages per project

Tooling

• Vitest — unit + integration tests
• ESLint — Next + React hooks/Compiler, type-aware TS + Prettier

Infrastructure

• Vercel — zero-config deployment
• Cloudflare Workers via @opennextjs/cloudflare

---

Setup

1. Create a new repo from this template:

   gh repo create my-app --template tommyxchow/next-template --private --clone
   cd my-app

   Or use the "Use this template" button on GitHub.

2. corepack enable (one-time, if not already enabled)

3. pnpm install — pnpm 11 is pinned via packageManager in package.json; corepack downloads the correct version automatically

4. Create .env.local for any server-only keys your app needs

5. Optionally create .dev.vars for Cloudflare bindings during local dev (Cloudflare only)

6. pnpm dev

---

Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Production build (Next.js)
pnpm start	Start production server (Node.js)
pnpm preview	Build and preview on local Cloudflare Workers
pnpm deploy	Build and deploy to Cloudflare Workers
pnpm upload	Build and upload to Cloudflare Workers
pnpm cf-typegen	Generate types from Cloudflare bindings
pnpm lint	Run ESLint
pnpm typecheck	TypeScript type checking
pnpm format	Format with Prettier
pnpm format:check	Check formatting with Prettier
pnpm test	Run all tests (Vitest)
pnpm check	Full check: typecheck + lint + format + test + build
pnpm ui:add	Add shadcn components on demand
pnpm ui:update	Regenerate named shadcn components
pnpm clean	Delete .next, .open-next, node_modules
pnpm nuke	Clean + delete pnpm-lock.yaml

Tip

Run pnpm check before pushing to catch type errors, lint issues, formatting drift, test failures, and build errors in one shot.

---

Deployment

Vercel

No configuration needed — connect your GitHub repo on Vercel and push.

Note

To clean up unused Cloudflare-specific config:

1. Delete wrangler.jsonc, open-next.config.ts, and cloudflare-env.d.ts
2. Remove the initOpenNextCloudflareForDev block in next.config.ts
3. Remove devDependencies: @opennextjs/cloudflare, wrangler
4. Remove scripts: preview, deploy, upload, cf-typegen

Cloudflare Workers

Via dashboard (recommended)

1. Go to the Cloudflare dashboard > Workers & Pages > Create

2. Connect your GitHub repo

3. Set the build and deploy commands:

   Field	Value
   Build command	pnpm exec opennextjs-cloudflare build
   Deploy command	pnpm exec opennextjs-cloudflare deploy

4. Push to your branch to trigger the first build and deploy

Via CLI

Alternatively, deploy directly from your machine:

pnpm exec wrangler login
pnpm deploy

This creates the Worker on Cloudflare using the name field in wrangler.jsonc. You can then connect your Git repo in the dashboard under Settings > Build for CI/CD.

Caching (ISR)

ISR and caching require additional Cloudflare bindings. The R2 incremental cache is pre-configured but commented out in wrangler.jsonc and open-next.config.ts — uncomment both to enable.

For time-based revalidation or on-demand revalidation (revalidateTag / revalidatePath), you'll also need a DO queue and/or tag cache. See the OpenNext caching docs for full setup.

Image optimization

Cloudflare Images is pre-configured for next/image optimization via the images binding in wrangler.jsonc. See the OpenNext image docs for details.

Static asset caching

public/_headers sets immutable caching for /_next/static/* assets. See the OpenNext static assets docs for more info.

Production checklist

Before going live, ensure:

• SITE_URL environment variable is set to your production domain — in wrangler.jsonc for Cloudflare or the dashboard for Vercel (used by metadataBase, robots.txt, sitemap.xml)
• Security headers are configured for your app (e.g., Content-Security-Policy, Strict-Transport-Security, X-Content-Type-Options, Referrer-Policy, Permissions-Policy)
• Replace the demo home page (src/app/page.tsx) with your app content