Name: YepAPI/skills
Author: Community

YepAPI/skills

App Router, Server Components, and modern Next.js 15 patterns — no Pages Router hallucinations.

skills 是什么？

skills is a Claude Code agent skill that app Router, Server Components, and modern Next.js 15 patterns — no Pages Router hallucinations.

兼容平台~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/nextjs

文档

Next.js 15

Always use App Router (app/ directory), never Pages Router (pages/)
Server Components by default — only add "use client" when needed (state, effects, browser APIs)
Use generateMetadata() for dynamic metadata, not <Head>
Use Server Actions for mutations, not API routes for simple forms
Use next/image with proper width/height or fill — never raw <img>
Use next/link — never raw <a> for internal navigation
Route handlers go in app/api/[route]/route.ts — export named functions (GET, POST)
Layouts in layout.tsx, loading states in loading.tsx, error boundaries in error.tsx
Use unstable_cache or revalidateTag for ISR — not legacy getStaticProps/getServerSideProps
Environment variables: NEXT_PUBLIC_ prefix for client-side only

getServerSideProps, getStaticProps, getStaticPaths — these are Pages Router
_app.tsx, _document.tsx — these are Pages Router
useRouter from next/router — use next/navigation instead
next/head — use generateMetadata export
Wrapping Server Components in "use client" unnecessarily