next-best-practices

Check Next.js projects for best practice violations across file conventions and async APIs.

Updated Feb 2, 2026
One-click install
npx skills add https://github.com/treephesians/annotation --skill next-best-practices-treephesians
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/treephesians/annotation/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/treephesians/annotation --skill next-best-practices-treephesians

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers write cleaner, more efficient, and maintainable Next.js applications by enforcing best practices and identifying common anti-patterns.

Core Features & Use Cases

  • Code Review Assistant: Automatically checks for invalid RSC boundaries, non-serializable props, and incorrect async patterns.
  • Performance Optimization: Guides on image/font optimization, bundling, and runtime selection.
  • Use Case: Integrate this Skill into your CI/CD pipeline to catch common Next.js mistakes before they reach production, ensuring code quality and performance.

Quick Start

Review the current project for Next.js best practice violations.

Frequently Asked Questions about next-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my Next.js project for React Server Component boundary violations?

To check Next.js RSC boundary violations, review your code for non-serializable props passed to client components and incorrect async patterns. This process automatically identifies invalid React Server Component boundaries and flags common anti-patterns before production.

What are common Next.js hydration errors and how do I resolve them?

Common Next.js hydration errors often stem from invalid React Server Component boundaries or incorrect async API usage. Resolve these hydration issues by enforcing proper suspense boundaries and ensuring non-serializable props are not passed across server and client components.

Can I use this to catch Next.js image and font optimization mistakes in CI/CD?

Yes, you can integrate this Next.js best practices enforcement into your CI/CD pipeline. It catches image and font optimization mistakes alongside bundling and runtime selection issues before they reach production, ensuring code quality and performance.

What is the best way to implement parallel and intercepting routes in Next.js?

The best way to implement parallel and intercepting routes in Next.js is by following guided best practices for data patterns and file conventions. This ensures proper suspense boundary usage and prevents common pitfalls associated with advanced routing implementations.

Why does my Next.js application have suspense boundary issues with async APIs?

Suspense boundary issues with async APIs in Next.js usually occur due to incorrect async patterns or invalid React Server Component boundaries. Address these by applying comprehensive guidance on async API usage and proper suspense boundary placement.