YepAPI/skills

Next.js 15

Rules

• 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

Avoid

• 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