next-best-practices

Next.js data fetching in Server Components should use direct async patterns to avoid data waterfalls. Fetching data directly on the server minimizes client-side JavaScript and leverages React Server Component boundaries for optimal performance.

Hydration errors in Next.js occur when server-rendered HTML mismatches client output. Debug these errors by checking Suspense boundaries, verifying client directives, and ensuring consistent rendering logic between server and client component boundaries.

Parallel and intercepting routes in Next.js enable advanced routing UI patterns like modals and split views. Use them when you need to render multiple route segments simultaneously or intercept navigation to show contextual content without losing the current route context.

Next.js provides built-in image and font optimization to improve web development performance. It automatically serves correctly sized images, prevents layout shift, and optimizes font loading to reduce visual shifts and enhance page speed.

Next.js runtime selection for route handlers depends on whether your code needs Node.js APIs or edge capabilities. Choose the Node.js runtime for heavy processing and the edge runtime for low-latency, geographically distributed execution.

Self-hosting a Next.js application requires configuring a Node.js server or custom Docker container. Best practices include managing environment variables, handling image optimization cache, and ensuring your server supports the required streaming and server action responses.