next-best-practices

In Next.js 15+, params and searchParams are Promises that must be awaited. Type them as Promise<{ slug: string }> and await them in pages, layouts, route handlers, and generateMetadata. Run npx @next/codemod@latest next-async-request-api to migrate automatically.

Props crossing the Server-to-Client boundary must be JSON-serializable, and Date objects lose their type during serialization. Convert dates with .toISOString() on the server, then reconstruct with new Date() inside the client component.

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 cacheable GET endpoints consumed by third parties.

useSearchParams triggers a client-side rendering bailout in static routes unless wrapped in a Suspense boundary. Wrap the component using it in <Suspense fallback={...}> so the rest of the page stays statically rendered.

This error occurs when a package using browser APIs runs in a Server Component. Fix it by using dynamic(() => import('pkg'), { ssr: false }), wrapping usage in a client component, or adding the package to serverExternalPackages in next.config.js.

Default to the Node.js runtime, which supports full Node APIs, file system access, and most npm packages. Only use Edge runtime when you have specific geographic latency requirements and have verified all dependencies are Edge-compatible.