vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all(), or use better-all for partial dependency chains. In components, restructure with composition so sibling components fetch in parallel instead of sequentially.

Import directly from source files instead of barrel entry points, for example importing from lucide-react/dist/esm/icons/check rather than the package root. In Next.js 13.5+, enable optimizePackageImports to transform barrel imports automatically at build time.

Many rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side data fetching patterns. 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 session and authorization inside each action before performing mutations.