From Next.js Expert
Expert Next.js App Router: Server vs Client Components, data fetching, caching, server actions, and rendering strategy. Trigger keywords: Next.js, App Router, Server Components, RSC, use client, use server, server actions, route handler, generateStaticParams, revalidate, revalidatePath, middleware, streaming, Vercel, hydration. Use for routing, data/caching strategy, mutations, or rendering decisions in Next.js.
How this skill is triggered — by the user, by Claude, or both
Slash command
/nextjs-expert:nextjs-expertThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Server Components are the default; `"use client"` is a deliberate, leaf-level choice. Fetch on the server, cache explicitly, and keep secrets off the client.
Server Components are the default;
"use client"is a deliberate, leaf-level choice. Fetch on the server, cache explicitly, and keep secrets off the client.
loading/error UI, route groups.revalidate*.react-expert.tailwind-expert.nodejs-backend-expert."use client". Add the directive only for state, effects, event handlers, or browser APIs — and keep it at the leaves."use client" makes a component and its imported tree part of the client bundle. Pass server-fetched data down as props instead of pulling data into client components.import "server-only".async/await directly in Server Components; co-locate the fetch with the component that needs it (React dedups identical requests in a render).fetch(url, { cache: "force-cache" }), { next: { revalidate: N } } for ISR, or { cache: "no-store" } for always-fresh.next: { tags: [...] }) and invalidate precisely with revalidateTag/revalidatePath after writes."use server" functions for forms/mutations. Validate and authorize on the server — actions are public endpoints. Revalidate affected paths/tags afterward and return typed results.loading.tsx + <Suspense> to stream slow parts; error.tsx for boundaries; generateStaticParams to statically render dynamic routes.next/image, next/font, and <Link> primitives — they fix common perf/CLS/font issues for free.| Need | Do |
|---|---|
| Read data for a page | async Server Component fetch |
| Always-fresh data | cache: "no-store" / dynamic |
| Rebuild every N seconds | next: { revalidate: N } (ISR) |
| Invalidate after a write | revalidateTag / revalidatePath |
| Interactivity (state/events) | small "use client" leaf |
| Mutation/form submit | server action ("use server") |
| Slow section shouldn't block page | <Suspense> + loading.tsx |
"use client" at the top of a big tree → ships everything to the browser. Push it to leaves.server-only.useEffect data fetching in a page that could be a Server Component → lose SSR, caching, and SEO.Date.now()/window/random in render → guard or move to an effect/client component.Server Component fetch with ISR + tags
// app/posts/page.tsx
export default async function Posts() {
const posts = await fetch("https://api.example.com/posts", {
next: { revalidate: 60, tags: ["posts"] },
}).then((r) => r.json());
return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}
Server action: validate, authorize, revalidate
// app/actions.ts
"use server";
import { revalidateTag } from "next/cache";
import { z } from "zod";
const Input = z.object({ title: z.string().min(1) });
export async function createPost(formData: FormData) {
const { title } = Input.parse(Object.fromEntries(formData)); // validate
const user = await requireUser(); // authorize
await db.post.create({ data: { title, authorId: user.id } });
revalidateTag("posts");
}
react-expert — patterns inside client components.typescript-expert — typing pages, actions, and params.api-design-expert — route-handler contracts. tailwind-expert — styling.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub miaoge-ge/coding-agent-skills --plugin nextjs-expert