Next.js Fullstack
Ship Next.js features with correct boundaries between server, client, data, and UI.
Grok Build Mode
- Use Plan Mode for routing, auth, persistence, caching, or data-fetching changes.
- Use subagents for broad changes:
routes: app router structure, layouts, metadata.data: DB queries, server actions, validation.client: components, state, forms, accessibility.tests: unit/e2e/build verification.
- Arena-style comparison: compare server action vs API route vs client-only approaches and choose by security, simplicity, and cache behavior.
Workflow
- Detect Next version, package manager, styling, auth, DB, and test setup.
- Keep server-only code out of client components.
- Validate inputs on the server.
- Respect existing caching/revalidation patterns.
- Add loading/error/empty states.
- Run the narrowest relevant checks:
npm run lintnpm run typechecknpm run build- project tests.
Rules
- Do not leak secrets into
NEXT_PUBLIC_*.
- Avoid unnecessary client components.
- Do not mutate data without auth and ownership checks.
- Keep forms progressive and resilient.
- Use existing UI primitives and route conventions.
Example Prompts
Use nextjs-fullstack. Plan a server-action implementation for this feature, including validation, auth, tests, and loading/error UI.
Review this Next.js diff for server/client boundary bugs and cache invalidation issues.
1---2name: nextjs-fullstack3description: Use for Next.js App Router, React Server Components, server actions, API routes, auth, database integration, caching, deployment, or full-stack product features.4---56# Next.js Fullstack78Ship Next.js features with correct boundaries between server, client, data, and UI.910## Grok Build Mode1112- Use Plan Mode for routing, auth, persistence, caching, or data-fetching changes.13- Use subagents for broad changes:14 - `routes`: app router structure, layouts, metadata.15 - `data`: DB queries, server actions, validation.16 - `client`: components, state, forms, accessibility.17 - `tests`: unit/e2e/build verification.18- Arena-style comparison: compare server action vs API route vs client-only approaches and choose by security, simplicity, and cache behavior.1920## Workflow21221. Detect Next version, package manager, styling, auth, DB, and test setup.232. Keep server-only code out of client components.243. Validate inputs on the server.254. Respect existing caching/revalidation patterns.265. Add loading/error/empty states.276. Run the narrowest relevant checks:28 - `npm run lint`29 - `npm run typecheck`30 - `npm run build`31 - project tests.3233## Rules3435- Do not leak secrets into `NEXT_PUBLIC_*`.36- Avoid unnecessary client components.37- Do not mutate data without auth and ownership checks.38- Keep forms progressive and resilient.39- Use existing UI primitives and route conventions.4041## Example Prompts4243```text44Use nextjs-fullstack. Plan a server-action implementation for this feature, including validation, auth, tests, and loading/error UI.45```4647```text48Review this Next.js diff for server/client boundary bugs and cache invalidation issues.49```
DominikTobureto