next-best-practices

Fetch data directly in async Server Components using fetch or database calls without an API layer. Use Promise.all for parallel requests, wrap independent sections in Suspense for streaming, and apply the preload pattern with React cache() to avoid waterfalls.

Use Server Actions for mutations triggered from your UI like form submissions, since they offer type safety and progressive enhancement. Use Route Handlers for external webhooks, public REST APIs, and GET endpoints that need HTTP caching.

Props passed from Server to Client Components must be JSON-serializable, and Date objects silently become strings. Serialize dates with .toISOString() on the server, then reconstruct with new Date() inside the client component.

Hydration errors come from browser-only APIs, dates rendered in different timezones, random values, or invalid HTML nesting. Fix them by rendering dynamic content only after mount with useEffect, using the useId hook, and correcting invalid tag nesting.

Next.js 16 renames middleware.ts to proxy.ts with a proxy() export and proxyConfig object, keeping the same capabilities. Run npx @next/codemod@latest upgrade to migrate automatically from the middleware convention.

Set output: 'standalone' in next.config.js to generate a minimal server.js with only production dependencies. Copy the standalone folder plus .next/static and public into your container, and configure a custom cache handler like Redis for multi-instance ISR.