nextjs-best-practices

Use a decision tree to differentiate Next.js App Router components: keep components server-default for data fetching, and mark them client-only when handling user interactivity dependencies.

Next.js App Router data fetching and caching best practices involve using appropriate fetching strategies, applying revalidation directives, and configuring caching layers to match Next.js recommendations for optimal route performance.

Structure Next.js app directory route handlers by following routing conventions, returning correct route handler status codes, and implementing Zod validation to ensure reliable API endpoint definitions.

Common Next.js Server Action anti-patterns include misconfiguring typed server actions and ignoring metadata requirements, which can degrade performance and bypass established server-side validation boundaries.

Configure Next.js metadata and image optimization by following specific image metadata guidelines and performance optimization techniques to maintain fast, reliable builds across marketing sites and internal tooling.