skills.rest
caiohbfurtado
caiohbfurtadoCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/caiohbfurtado/apac-web --skill next-best-practices-caiohbfurtado
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
fromej-devfromej-dev

frontend-patterns

Codify reusable React and Next.js UI patterns with TypeScript/JSX examples.

Official
Intermediate
SilverAssistSilverAssist
1

web-performance-analysis

Analyze web performance issues with PageSpeed Insights and Lighthouse data.

Official
Intermediate
ThalfmanThalfman

next-best-practices

Guide Next.js development best practices covering file conventions, RSC boundaries, and async patterns.

Community
Advanced
cure-labcure-lab
175

vercel-react-best-practices

Optimize React and Next.js application performance with bundle size and rendering guidelines.

Official
Advanced