Next.js 15 Agent Skill
App Router, Server Components, and modern Next.js 15 patterns — no Pages Router hallucinations.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: App Router, Server Components, and modern Next.js 15 patterns — no Pages Router hallucinations.
homepage: https://yepapi.com/skills/nextjs
metadata:
tags: [nextjs, react, framework, app-router]
---
# 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"` unnecessarilyInstall
Why Use the Next.js 15 Skill?
Without this skill, your AI guesses at next.js 15 patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Next.js 15 skill installed. Your AI knows the context and writes code that fits.
"Build a Next.js 15 app with App Router, Server Components, and proper data fetching patterns"
"Create a Next.js page with streaming SSR, Suspense boundaries, and error handling"
"Set up a Next.js project with middleware, route groups, and parallel routes"
Next.js 15 skill — FAQ
It enforces App Router patterns, Server Components, and modern Next.js 15 conventions. Your AI writes Next.js code without hallucinating deprecated Pages Router APIs or outdated patterns.
Run `npx skills add YepAPI/skills --skill nextjs` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
No. The skill enforces App Router patterns only, which is the current recommended approach for Next.js 15. This prevents the AI from generating outdated Pages Router code.