react-best-practices

Use Promise.all() for independent async operations and start promises early in API routes before awaiting them. For partial dependencies, chain dependent fetches or use the better-all library to maximize parallelism.

Avoid barrel file imports from libraries like lucide-react or @mui/material, use next/dynamic for heavy components, and defer non-critical third-party scripts until after hydration. Next.js 13.5+ can optimize package imports automatically via optimizePackageImports.

Yes, most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side data fetching. Next.js-specific rules cover Server Components, Server Actions, and next/dynamic imports.

Avoid Suspense when data is critical for layout decisions, when content is SEO-critical above the fold, or when queries are small and fast. The trade-off is faster initial paint versus potential layout shift.

Server Actions are exposed as public endpoints just like API routes, so middleware or layout guards alone are insufficient. Always verify authentication and authorization inside each action, and validate inputs with a schema like Zod.