next-best-practices

For Next.js App Router, use React Server Components for data reads and Server Actions for mutations to prevent waterfall requests and improve performance.

Organize your Next.js project structure by following file conventions for route segments and special files to properly define routing and layouts within the App Router.

You need error.tsx for route-level error handling and global-error.tsx for application-wide error boundaries in Next.js to implement robust error recovery patterns.

Next.js App Router supports parallel and intercepting routes, allowing you to render multiple route segments simultaneously and intercept navigation for advanced routing patterns.

Optimize images and fonts in Next.js by leveraging built-in optimization features for automatic resizing, responsive loading, and font preloading to improve web performance.

React Server Component boundary errors occur when invalid patterns are used, such as passing non-serializable props or using client-only hooks in server components.