vercel-react-best-practices

Use Promise.all() to run independent async operations concurrently instead of awaiting them sequentially. For partial dependencies, start promises early and await late, or use the better-all library to maximize parallelism automatically.

Import directly from source files instead of barrel entry points that re-export thousands of modules. In Next.js 13.5+, use the optimizePackageImports config option to automatically transform barrel imports while preserving TypeScript support.

Most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side fetching patterns. Next.js-specific rules cover Server Actions, RSC serialization, 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 before performing mutations.