next-best-practices

Next.js data fetching is best handled through React Server Components for asynchronous fetching, Server Actions for mutations, or Route Handlers for building external API endpoints.

React Server Component boundaries separate server-only logic from client interactivity, requiring careful use of directives to prevent invalid patterns and ensure components render in the correct runtime environment.

Use Server Components for reading and rendering data without JavaScript overhead, and use Server Actions when you need to handle form submissions and data mutations directly on the server.

Next.js optimization involves using built-in components for automatic image resizing and font preloading, which reduces layout shifts and improves Core Web Vitals without external configuration.

App Router file conventions require specific naming for route segments and special files; debugging tricks involve checking your folder structure to ensure segments align with expected routing behavior.

Next.js metadata handling supports dynamic SEO tags through a specialized metadata API, allowing you to generate title and description outputs dynamically based on route parameters.