next-best-practices

To implement data fetching in Next.js, utilize Server Components, Server Actions, or Route Handlers based on your mutation needs. This Skill outlines how to choose the optimal strategy, ensuring you handle async params, cookies(), and headers() correctly for efficient data loading.

Managing React Server Component (RSC) boundaries requires passing only serializable props to Client Components. This guidance helps detect and prevent invalid patterns when crossing server and client boundaries, ensuring data is passed safely without breaking the component tree.

Optimizing images and fonts in Next.js involves using the built-in optimization APIs to automatically serve properly sized assets. Following these Next.js best practices ensures improved web performance, reduced layout shift, and maintainable asset delivery across your application.

Route Handlers should be used instead of Server Actions when you need to expose HTTP endpoints for webhooks or external API consumption. This Skill provides clear guidance on choosing the optimal data strategy between Server Components, Server Actions, and Route Handlers.

Error handling in Next.js involves implementing robust error boundaries to catch route segment failures. Runtime selection works by specifying Node.js or Edge directives in your code, ensuring you adhere to modern Next.js development standards for maintainability.