Nextjs Performance

The nextjs-performance skill enables AI agents to analyze Next.js applications and generate actionable reports on performance metrics, identifying bottlenecks and optimization opportunities. It leverages deep inspection of the codebase to provide specific recommendations for improving load times and runtime efficiency.

When to use it

• Audit a production Next.js site before a major release to ensure core web vitals meet target thresholds.
• Diagnose slow page loads in a complex application by pinpointing inefficient server-side rendering or client-side hydration patterns.
• Evaluate the impact of recent code changes on application performance without needing manual browser profiling.

Key capabilities

• Analyzes Next.js application architecture for performance regressions.
• Generates detailed reports highlighting specific bottlenecks in rendering and data fetching.
• Provides concrete optimization strategies tailored to the detected issues.

Example prompts

• "Run a full performance audit on my Next.js project and list the top three factors slowing down the homepage."
• "Identify any inefficient server components or large bundle sizes that could be optimized in this codebase."
• "Generate a performance report comparing current metrics against best practices for Next.js applications."

Tips & gotchas

Ensure your Next.js application is deployed or accessible via a build process, as the skill analyzes compiled artifacts and runtime behavior. For the most accurate results, provide access to the production environment where real-world traffic patterns exist.