next-best-practices

The best way to fetch data in Next.js depends on your component boundaries: use React Server Components for direct fetching, Server Actions for mutations, and Route Handlers for external API endpoints. This guide helps you choose the correct pattern for performance.

Handle Next.js errors using `error.tsx` for route-level boundaries and `global-error.tsx` for root-level recovery. This Skill explains how to implement robust error handling to catch runtime issues and prevent full application crashes.

React Server Component boundaries separate server-only logic from client interactivity in Next.js. This guide helps detect and prevent invalid RSC patterns, ensuring you correctly apply directives and maintain optimal component boundaries.

Optimize Next.js images and fonts by leveraging built-in bundling strategies and optimization techniques. This Skill provides expert guidance on configuring these assets to ensure efficient loading and robust application performance.

Use `error.tsx` for segment-specific error boundaries and `global-error.tsx` to catch root-level exceptions in Next.js. This Skill details how to implement both to ensure robust error handling across your application's route segments.

Data fetching in Next.js client components fails when invalid React Server Component patterns are used. This guide helps detect these boundary violations and offers solutions for moving fetch logic to the correct server-side runtime.