nextjs-fullstack-starter

A Claude Code plugin for scaffolding and maintaining lightweight back-office apps on pure Next.js (App Router) — no tRPC, no separate API service, no SPA shell. Server Components for reads, Server Actions for writes, services in src/server/modules/.

Designed for solo developers and small teams building internal tools — admin dashboards, CRUD apps, line-of-business systems, lightweight ERPs — where:

• The whole stack lives in one Next.js process (no separate API).
• The UI is server-rendered React — pages are async Server Components that call services directly, end-to-end typed, no JSON layer.
• Writes go through Server Actions, not a custom RPC.
• The backend is a real backend — services, permissions, audit, transactions, jobs — accessed through Server Components, Server Actions, route handlers, or MCP tools.
• Tests are first-class: services covered by Jest with mocked Prisma, integration tests with Testcontainers, browser flows by Playwright.

This is the no-tRPC counterpoint to nextjs-trpc-prisma-starter. See docs/why-this-stack.md for when to pick which.

What's in the box

Component	Purpose
/nfs-scaffold-app slash command	Kicks off the bootstrap Q&A — name, location, DB, auth, cache, MCP, deploy target. Generates the full project skeleton.
/nfs-add-auth, /nfs-add-cache, /nfs-add-mcp	Retrofit features into an existing scaffolded project. Updates CLAUDE.md as it goes.
/nfs-review-project	Audits the current project against the architectural invariants — flags missing server-only, business logic in pages, missing requirePermission on mutations, missing audit, wrong cache primitives, tRPC imports (wrong stack). Categorizes findings by severity.
nfs-scaffold-app skill	The bootstrap engine. Triggers on intents like "scaffold a Next.js fullstack app" / "start a back-office system".
nfs-architecture-patterns skill	Reference patterns for ongoing development — service layer, Server Components for reads, Server Actions for writes, route handlers, caching with cacheTag / updateTag, permissions + audit, error handling.
nfs-testing-patterns skill	How to test each layer cleanly — services, Server Actions, route handlers, e2e.
nfs-review-project skill	Drift detector. Combines a fast check-conventions.sh script with Claude-judgment reads to catch architecture violations before they ship.

Installation

Two install paths — pick what fits.

Path	What gets installed	Best for
A. npx skills CLI (vercel-labs/skills)	Skills only (SKILL.md files + references/scripts/assets)	Fastest install, cross-agent (Claude Code, Cursor, Codex, OpenCode, …)
B. Claude Code plugin (/plugin or settings.json)	Skills + slash commands + plugin manifest	Full experience inside Claude Code, including the /nfs-scaffold-app etc. commands

The skills work the same way under both paths (they trigger on user intent). Path B additionally gives you the explicit slash commands.

Path A — npx skills add (recommended for quick install)

# Install everything to ~/.claude/skills/ for Claude Code, globally
npx skills add juncoding/nextjs-fullstack-starter -g -a claude-code

# Browse what's in the repo without installing
npx skills add juncoding/nextjs-fullstack-starter --list

# Install just one specific skill
npx skills add juncoding/nextjs-fullstack-starter --skill architecture-patterns -g -a claude-code

Caveat: the skills CLI installs skills but not slash commands or the plugin manifest. The skills still trigger on intent (e.g. "scaffold a new internal tool on Next.js" → nfs-scaffold-app skill fires), but you won't be able to type /nfs-scaffold-app to invoke explicitly. If you want the slash commands, use Path B instead (or in addition).

All commands and skills are prefixed with nfs- (short for nextjs-fullstack-starter) so they're unambiguous when other plugins are also installed.

Path B — install as a full Claude Code plugin

Inside Claude Code, run /plugin and add this source:

github:juncoding/nextjs-fullstack-starter

Or edit ~/.claude/settings.json (user-level) / .claude/settings.json (project-level) directly:

{
  "plugins": {
    "nextjs-fullstack-starter": {
      "source": "github:juncoding/nextjs-fullstack-starter"
    }
  }
}

Restart Claude Code. All 7 skills + 5 slash commands become available.

Path C — clone locally (for iterating on the plugin itself)

git clone git@github.com:juncoding/nextjs-fullstack-starter.git ~/Dev/nextjs-fullstack-starter

Then point source at the local path:

{
  "plugins": {
    "nextjs-fullstack-starter": {
      "source": "/Users/you/Dev/nextjs-fullstack-starter"
    }
  }
}

Local installs pick up edits immediately on Claude Code restart — useful when authoring the plugin.

Quick start

1. Open Claude Code in an empty directory (or one you want the project created next to).
2. Run /nfs-scaffold-app.
3. Answer the Q&A: project name, location, database, auth, cache, MCP entry point, deployment target.
4. Claude scaffolds the project, writes .env.example and CLAUDE.md, and confirms with a verification run.

Later, retrofit features as needs evolve:

/nfs-add-cache       # Wire Next.js cacheTag + Redis if you're scaling
/nfs-add-mcp         # Add the MCP route handler + Better Auth mcp plugin
/nfs-add-auth        # Wire Better Auth if you skipped it initially
/nfs-review-project  # Audit drift against the architectural invariants

Each add-on updates CLAUDE.md so the project's documented architecture stays in sync with reality.

Why this stack

See docs/why-this-stack.md for the long version. Short version: a single Next.js process hosts UI + backend, services in src/server/modules/ are framework-agnostic (callable from pages, Server Actions, route handlers, MCP, cron — all unchanged), and the App Router's Server Components + Server Actions eliminate the API/JSON layer entirely. End-to-end types from Prisma row → React tree without an RPC contract in the middle.

This is NOT the right starter if you need:

• A native iOS/Android client — Server Actions are HTTP under the hood but not designed for non-web consumers. Use the tRPC variant or build a separate REST API.
• A public marketing/content site with heavy SEO needs — fine for those too, but the patterns here are tuned for auth-walled back offices.
• WebSockets — Next.js route handlers don't support upgrade. Run a separate process.

For everything else back-office-shaped, this is a strong, opinionated default.

When to pick this vs. the tRPC variant

See docs/why-this-stack.md for the full comparison.

	nextjs-fullstack-starter (this plugin)	nextjs-trpc-prisma-starter
Reads	Server Components, direct service call	Client components, tRPC + React Query
Writes	Server Actions	tRPC mutations
Cache layer	Next.js cacheTag + updateTag	React Query cache, utils.invalidate()
Native mobile client	Hard (Server Actions are web-shaped)	Easy (tRPC has type-safe HTTP)
JSON-over-HTTP API surface	None (private to the app)	One (/api/trpc/*)
Test ergonomics	Direct service calls	Direct service calls + typed createCaller

If you're sure you'll never need a non-web client, pick this one. If you want to keep that option open, pick the tRPC variant.

License

MIT — see LICENSE.