next-best-practices

Guide Next.js 16+ application architecture with RSC boundaries and data fetching patterns.

Updated May 21, 2026

Search Tags:#typescript #architecture #performance #react #nextjs #web-development

Ready to run

npx skills add https://github.com/caiohbfurtado/apac-web --skill next-best-practices-caiohbfurtado

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/caiohbfurtado/apac-web/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/caiohbfurtado/apac-web --skill next-best-practices-caiohbfurtado

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the complexity of modern Next.js development by providing a centralized, reliable source of truth for architectural patterns, file conventions, and performance optimizations, preventing common pitfalls like hydration errors and data waterfalls.

Core Features & Use Cases

Architectural Guidance: Enforces correct RSC boundaries, runtime selection, and async API patterns for Next.js 15+.
Performance Optimization: Provides actionable strategies for image, font, and script optimization to ensure high Core Web Vitals.
Troubleshooting: Offers specific debugging techniques for hydration mismatches, bundling issues, and parallel route configuration.

Quick Start

Ask the next-best-practices skill to review your current page component for invalid async patterns and suggest the necessary refactor.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

How do I structure React Server Component boundaries in Next.js 16?▼

To structure React Server Component boundaries in Next.js 16, enforce correct RSC boundaries by separating server-only data fetching from client components and applying async API patterns to maintain application scalability.

What is the best way to prevent data fetching waterfalls in Next.js?▼

Preventing data fetching waterfalls in Next.js requires aligning your data fetching patterns with framework conventions, ensuring parallel data retrieval where possible to avoid blocking rendering pipelines.

How do I fix hydration mismatch errors in Next.js applications?▼

Fixing hydration mismatch errors in Next.js involves applying specific debugging techniques to identify rendering inconsistencies between server and client, ensuring stable UI output before hydration.

How do I optimize Core Web Vitals in Next.js with image and font loading?▼

Optimizing Core Web Vitals in Next.js involves applying actionable performance strategies for image, font, and script optimization to reduce layout shift and improve overall loading speeds.

Does Next.js 16 require async params for dynamic route handlers?▼

Yes, Next.js 16 requires async params for dynamic route handlers. You must refactor page components to await asynchronous APIs, preventing invalid synchronous access to routing parameters.

How do I configure parallel routes and error handling in Next.js?▼

Configuring parallel routes and error handling in Next.js requires adhering to framework conventions for routing and bundling, utilizing specific debugging techniques to manage complex route configurations.