home / skills / bobmatnyc / claude-mpm-skills / core

core skill

safe

This skill helps you implement robust Next.js App Router patterns with server components, server actions, route handlers, and efficient caching.

npx playbooks add skill bobmatnyc/claude-mpm-skills --skill core

Review the files below or copy the command above to add this skill to your agents.

Files (8)

SKILL.md

832 B

---
name: nextjs-core
description: Core Next.js patterns for App Router development including Server Components, Server Actions, route handlers, data fetching, and caching strategies
version: 1.1.0
category: toolchain
progressive_disclosure:
  entry_point:
    summary: "Server-first patterns with safe mutations (Server Actions) and explicit caching/revalidation"
tags: [nextjs, app-router]
---

# Next.js Core (App Router)

- Server Components by default; minimal `"use client"`.
- Mutations in Server Actions (validate/authz; revalidate tags/paths).
- Route handlers for APIs/webhooks; add loading/error boundaries.

Anti-patterns:
- ❌ Fetch initial data in `useEffect`.
- ❌ Cache or revalidate too broadly.
- ❌ Client-only authz.

References: see `references/` (server actions, fetching, caching, routing, auth, testing).

Overview

This skill bundles core Next.js App Router patterns to build predictable, efficient server-centric applications. It emphasizes Server Components, Server Actions for mutations, route handlers for APIs, and pragmatic data fetching and caching strategies. The guidance reduces client-side complexity and improves performance and security.

How this skill works

The skill inspects common App Router responsibilities: where to place Server Components versus client components, how to implement Server Actions for validated and authorized mutations, and how to structure route handlers for APIs and webhooks. It prescribes data fetching and caching tactics (granular revalidation, tags/paths) and points out anti-patterns to avoid. It also recommends loading/error boundaries around asynchronous UI.

When to use it

Building new Next.js projects using the App Router with an emphasis on server rendering and progressive loading.
Implementing secure mutations that must run on the server with validation and authorization.
Creating API endpoints or webhook handlers within the Next.js route handler framework.
Optimizing data fetching and caching to avoid over-broad revalidation and stale or excessive requests.
Refactoring applications that currently rely too much on client-side effects for initial data.

Best practices

Prefer Server Components by default; add "use client" only where interactivity or browser APIs are required.
Put mutations in Server Actions and perform validation and authorization on the server side.
Use route handlers for API/webhook logic and wrap heavy async UI in loading/error boundaries.
Apply fine-grained caching and revalidation (tags or specific paths) instead of broad cache invalidation.
Avoid fetching initial page data in useEffect; fetch data on the server or via route handlers when possible.

Example use cases

A form that mutates user data using a Server Action that validates input and revalidates only affected cache tags.
An incoming webhook route handler that authenticates the request and triggers targeted revalidation of affected pages.
A dashboard built from Server Components with client components only for charts that need browser-only libs.
Refactoring a SPA that fetched initial data in useEffect to server-rendered data with progressive loading states.

FAQ

Should I avoid all client components?

No. Use client components where interactivity or browser APIs are required, but default to Server Components for structure and performance.

How do I handle mutations securely?

Implement mutations as Server Actions, perform validation and authorization server-side, and revalidate only the necessary tags or paths.