Agent skill · software engineering · aiskillstore
building-nextjs-apps
Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.
Why this skill is useful
Provides specific patterns and breaking changes for Next.js 16 that the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Next.js 16 Applications Build Next.js 16 applications correctly with distinctive design. Critical Breaking Changes (Next.js 16) 1. params and searchParams are Now Promises THIS IS THE MOST COMMON MISTAKE. 2. Client Components Need use() Hook 3. searchParams Also Async --- Core Patterns Project Setup App Router Layout Dynamic Routes Server Actions API Routes Middleware → proxy.ts --- Data Fetching Server Component (Default) Client Component --- Project Structure --- Next.js DevTools MCP Use the next-devtools-mcp server for runtime diagnostics and development automation. Setup Or in settings.json: Available Tools Tool Purpose ------ --------- init Establish context with available tools and best practices nextjsdocs Search and fetch official Next.js documentation browsereval Automate browser testing with Playwright nextjsindex Discover running Next.js dev servers nextjscall Execute MCP tools on running dev servers upgradenextjs16 Automated upgrade with codemods enablecachecomponents Configure Cache Components for Next.js 16 Key Use Cases 1. Get Real-time Errors 2. Debug Runtime Issues 3. Upgrade Assistance 4. Documentation Lookup Next.js 16 MCP Endpoint Next.js 16+ exposes a built-in MCP endpoint at http://localhost:3000/next/mcp (or your dev server port). The devtools MCP automatically discovers and connects to running servers. --- Verification Run: python3 scripts/verify.py Expected: ✓ building-nextjs-apps skill ready If Verification Fails 1. Check: references/ folder has nextjs-16-patterns.md 2. Stop and report if still failing Related Skills styling-with-shadcn - UI components for Next.js apps fetching-library-docs - Latest Next.js docs: --library-id /vercel/next.js --topic routing configuring-better-auth - OAuth/SSO for Next.js apps References references/nextjs-16-patterns.md - Complete Next.js 16 patterns references/frontend-design.md - Aesthetic guidelines for distinctive UI references/datetime-patterns.md - UTC/timezone handling for datetime-local inputs
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/building-nextjs-apps