nextjs-anti-patterns

Fix incorrect useEffect and useState usage in Next.js App Router by moving data fetching server-side and minimizing client-side state. This prevents performance bottlenecks and ensures proper Server and Client component boundaries.

Common Next.js App Router anti-patterns when migrating from the Pages Router include retaining legacy data fetching patterns and over-using client components. Correct them by shifting data fetching to the server and restricting client interactivity to where it is strictly needed.

Avoid data fetching waterfalls in Next.js App Router by performing data fetching on the server side. This eliminates sequential client-side requests and ensures adherence to Next.js best practices for server components.

Use Client components in Next.js only when client-side interactivity is strictly needed, such as for browser detection. Keep all other components on the server to prevent performance bottlenecks and inappropriate rendering.

The best way to review Next.js code for performance bottlenecks is to check for inappropriate Server and Client component boundaries, over-used client components, and inefficient server-side data fetching to ensure best practices are followed.