next-best-practices

Client components cannot be async functions. Remove the async keyword, fetch the data in a parent Server Component, and pass the result down as props. Alternatively, fetch inside the client component using useEffect.

Use Server Actions for mutations triggered from your UI, such as form submissions, since they offer type safety and progressive enhancement. Use Route Handlers for webhooks, external API access, and public REST endpoints.

useSearchParams triggers a client-side rendering bailout in static routes unless wrapped in a Suspense boundary. Wrap the component using the hook in a Suspense fallback to keep the rest of the page statically rendered.

No, props crossing the server-client boundary must be JSON-serializable. Convert Dates with toISOString(), Maps to objects, and define event handlers inside the client component or use Server Actions marked with 'use server'.

The default filesystem cache breaks across multiple instances. Configure a custom cacheHandler in next.config.js backed by shared storage like Redis or S3, and disable the in-memory cache with cacheMaxMemorySize set to 0.

Middleware was renamed to proxy in Next.js 16. The file becomes proxy.ts, the exported function becomes proxy(), and the config export becomes proxyConfig. Run the official upgrade codemod to rename automatically.