next-best-practices

Enforce official Next.js App Router best practices for code and performance.

Updated Apr 22, 2026
One-click install
npx skills add https://github.com/wixels/sab-colour-profile --skill next-best-practices-wixels
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/wixels/sab-colour-profile/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/wixels/sab-colour-profile --skill next-best-practices-wixels

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates common Next.js development errors, performance bottlenecks, and framework anti-patterns by providing clear, up-to-date guidance on official best practices, helping you build maintainable, high-performance applications that align with current framework standards.

Core Features & Use Cases

  • Comprehensive Framework Coverage: Includes guidance for all core Next.js App Router concepts including file conventions, React Server Component boundaries, async API patterns, data fetching strategies, and error handling.
  • Performance Optimization Rules: Provides specific best practices for image and font optimization, bundling, self-hosting, and debug workflows to maximize application speed and efficiency.
  • Use Case: Use this Skill when writing or reviewing Next.js code to avoid common pitfalls like invalid RSC patterns, hydration mismatches, data waterfalls, and incorrect bundling configurations.

Quick Start

Request an audit of your Next.js project's compliance with official best practices for file structure, RSC implementation, and data fetching patterns.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I enforce Next.js App Router best practices for React Server Components?

To enforce Next.js App Router best practices, validate React Server Component boundaries and async API patterns. This prevents invalid RSC implementations and ensures maintainable, production-ready code aligned with current framework standards.

What is the best way to avoid data waterfalls and hydration mismatches in Next.js?

The best way to avoid data waterfalls and hydration mismatches is to apply official Next.js data fetching strategies and error handling rules. This eliminates common performance bottlenecks and framework anti-patterns during development.

How do I optimize images and fonts for production-ready Next.js applications?

To optimize images and fonts for production-ready Next.js applications, apply specific performance optimization rules for bundling and self-hosting. This maximizes application speed and efficiency while avoiding incorrect configurations.

Does this Next.js guidance apply to error handling and deployment configuration?

Yes, this Next.js guidance applies to error handling and deployment configuration. It provides clear rules for all core App Router concepts, ensuring consistent, maintainable code that avoids known deployment anti-patterns.

Why does my Next.js project have performance issues and framework anti-patterns?

Your Next.js project has performance issues and anti-patterns due to invalid RSC patterns or incorrect bundling configurations. Auditing your code against official framework best practices eliminates these common development errors.