nextjs Errors

8 error patterns

Hydration failed because the initial UI does not match|Text content does not match server-rendered HTML

•Avoid using Date.now(), Math.random(), or browser APIs (window, localStorage) during initial render
•Use `useEffect` + state to render browser-dependent content only on client

ReferenceError: window is not defined|ReferenceError: document is not defined

•Wrap browser-only code in `if (typeof window !== 'undefined')` check
•Use dynamic import with `{ ssr: false }`: `dynamic(() => import('./Component'), { ssr: false })`

You're importing a component that needs .+\. It only works in a Client Component

•Add `'use client'` directive at the top of the file that uses hooks, event handlers, or browser APIs
•Extract the interactive parts into a separate client component and import it

Error: Cannot use (useState|useEffect|useRef|useContext) in a Server Component

•Add `'use client'` at the top of the file
•Split into a server component (data fetching) and client component (interactivity)

Dynamic server usage.*couldn't be rendered statically

Error occurred prerendering page|getStaticProps.*failed

•Ensure all data fetches in getStaticProps/generateStaticParams handle errors gracefully
•Add `fallback: 'blocking'` or `dynamicParams: true` for pages with unknown params at build time

Invalid src prop.*hostname .+ is not configured under images in.*next\.config

•Add the image hostname to `images.remotePatterns` in next.config.js
•Use `images: { remotePatterns: [{ protocol: 'https', hostname: 'example.com' }] }`

API resolved without sending a response.*API Route

•Ensure every code path in the API handler calls `res.status().json()` or `res.end()`
•Await all async operations before the handler function completes