Nextjs Expert

What it does

This skill provides expert guidance on Next.js 13-15 development, focusing on the App Router, Server Components, data fetching patterns, performance optimization, and deployment strategies. It aims to identify and resolve common issues within Next.js projects by applying a progressive fix strategy, validated using Next.js development tools. Before providing assistance, it checks for specific areas like React components, TypeScript configuration, database optimization, general performance profiling, testing, or CSS styling, and will recommend alternative specialist skills if appropriate.

When to use it

• You're encountering issues with the App Router in your Next.js application.
• You need help optimizing data fetching strategies within your Next.js project.
• You’re unsure how to best deploy your Next.js application (e.g., using Vercel, Docker, or Netlify).
• You're experiencing performance bottlenecks in your Next.js app and want expert advice.
• You need assistance understanding Server Components and their implementation.

Key capabilities

• Expert knowledge of Next.js 13-15 features (App Router, Server Components)
• Identification of common anti-patterns in Next.js development.
• Application of progressive fixes for identified issues.
• Validation using Next.js development tools.
• Detection of the Next.js version and router type (Pages or App).
• Checks for deployment configuration files (vercel.json, Dockerfile, netlify.toml)
• Identifies usage of Next.js Image optimization and static generation.

Example prompts

• "I'm having trouble with data fetching in my Next.js app using the App Router. Can you help?"
• "How can I optimize the performance of my Next.js application?"
• “What are best practices for deploying a Next.js 14 application to Vercel?”
• "I'm seeing slow load times in my Next.js app. What could be causing this?"

Tips & gotchas

• The skill will first check if your issue falls under the expertise of another specialist (e.g., react-expert, typescript-expert). If so, it will recommend that alternative.
• It attempts to detect the Next.js version and router type automatically. Ensure these tools are available in the environment for accurate detection.