Next.js App Router & Server Components

What it does

Next.js App Router & Server Components is a Cursor skill: a SKILL.md playbook that AgenticKit installs at .cursor/skills/next-app-router. Cursor's agent loads it when the task matches the skill description, instead of stuffing the same rules into every chat.

Production guidelines for Next.js App Router including nested layouts, streaming SSR, parallel routes, Server Actions, and Core Web Vitals optimization.

Architecture patterns for React Server Components, Suspense, and Server Actions. The file is domain knowledge, not a slash macro. You do not type it. The agent reads it when the job is next app router.

Why it exists

Default Cursor has no memory of how your team ships code, schema, and tests. Founders paste the same conventions into chat, then watch the model drift on the next turn. This skill exists so those conventions live on disk and load only when relevant.

It ships in the Engineering Kit. It is wired to React 19 & Next.js Specialist (react-specialist), Technical Lead & System Architect (tech-lead), and Design Systems & UI Specialist (design-engineer). It is wired to the /build-page: UI Page & Responsive Component Builder and /ship: End-to-End Feature Pipeline Shipper commands. That graph is the point: the skill is the standard, the agent is the role, the command is the trigger.

When to use it

• Use Next.js App Router & Server Components when the work is specifically about architecture patterns for react server components, suspense, and server actions.
• Load it before a long session that will touch this surface more than once. A one-line edit does not need the full playbook.
• Use it on production SaaS work (multi-tenant apps, paid features, anything that will be reviewed) rather than a throwaway prototype.

When not to use it

• Do not treat the skill as a replacement for a slash command. Skills teach. Commands run a pipeline.
• Do not paste the whole SKILL.md into chat. If Cursor is not loading it, fix the description or invoke the matching command.
• Do not use it as a generic 'write better code' rule. Scope is this domain only.

Example workflow

1. Install the Engineering Kit so .cursor/skills/next-app-router lands in the repo.
2. Open a new Cursor agent chat pointed at the files this skill governs.
3. Ask the React 19 & Next.js Specialist (react-specialist) to read the skill, or run /build-page: UI Page & Responsive Component Builder.
4. Review the first artifact against the practices below. If it violates one, stop and correct the file. Do not prompt 'just finish it'.
5. Commit the skill-guided files with the rest of the slice so the next session inherits the same standard.

Example usage

Example prompt: "Read .cursor/skills/next-app-router and apply it to this change. Do not invent extra conventions."

Or trigger the pipeline: /build-page: UI Page & Responsive Component Builder. That command is written to load this skill.

Check the output against: Keep server-only code (DB queries, API secrets) strictly in Server Components

Example output

• The skill itself does not write a single output file. It changes what the agent is allowed to produce in code, schema, and tests.
• When you run /build-page: UI Page & Responsive Component Builder, expect repo files plus notes under docs/, not a chat-only answer.

Best practices

• Keep server-only code (DB queries, API secrets) strictly in Server Components
• Use Server Actions for mutations with useActionState and optimistic updates
• Implement granular Suspense boundaries around slow data fetching streams
• Avoid large client bundles by pushing interactivity to the leaves of the component tree

Common mistakes

• Ignoring "Keep server-only code (DB queries, API secrets) strictly in Server Components" and hoping a later prompt will clean it up.
• Copying the skill into .cursor/rules as always-on. That burns context and fights Cursor's load-on-match design.
• Running two overlapping skills that contradict each other in the same turn.
• Letting the agent skip tests or types because 'the skill is about architecture'.