Next.js skills
Next.js skills give your agent current knowledge of the App Router, server components, caching APIs, and Vercel deployment so it applies correct patterns instead of reaching for outdated Pages Router conventions.
What your agent can do with next.js skills installed
- Identify and fix data-fetching waterfalls across server and client component boundaries
- Apply use cache, cacheLife, and cacheTag for the correct route and data source
- Structure App Router projects with correct file conventions, layouts, and error boundaries
- Catch barrel imports, heavy client components, and unnecessary dynamic imports
- Set up Turborepo pipelines, remote caching, and affected-only runs
- Deploy with environment variables, preview URLs, and edge configuration in place
Skills in this category
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
vercel-composition-patternsvercel-labs/agent-skillsvercel-composition-patterns is published by vercel-labs/agent-skills. Review its source instructions before using it in an agent workflow.
deploy-to-vercelvercel-labs/agent-skillsDeploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
turborepovercel/turborepo|
ai-sdkvercel/aiAnswer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
Building on Vercel? Several of these skills ship together as a single plugin: npx plugins add vercel/vercel-plugin.
Works with your agent
Next.js skills work with Claude Code, Cursor, GitHub Copilot, Windsurf, Cline, Codex, Gemini CLI, and agents that support the skills CLI.
Frequently asked questions
My agent keeps writing Pages Router patterns. Will these skills fix that?
Yes. The Next.js and React best-practice skills explicitly cover App Router conventions and steer agents away from outdated defaults.
How do next-best-practices and vercel-react-best-practices differ?
One covers Next.js structure, APIs, and metadata; the other covers React performance across waterfalls, bundle size, and rendering.
Does next-cache-components cover the use cache directive?
Yes. It covers partial prerendering, use cache, cacheLife, cacheTag, and on-demand invalidation.
Can I use these skills without deploying to Vercel?
Yes. Only the deployment-specific skill requires Vercel.