Nextjs Error Fixes
Error: useRouter only works in Client Components. Add the "use client" directive
`useRouter` (and other client-only hooks like `usePathname`, `useSearchParams`) can only run inside a Client Component. Add `"use client"` as the very first line of the file, or move the navigation logic into a smaller Client Component if the rest of the file needs to stay a Server Component.
Error: Event handlers cannot be passed to Client Component props
You're passing an `onClick` (or similar) handler from a Server Component down to a Client Component. Functions can't cross the server/client boundary — the Client Component needs to define its own handler internally, or the interactive part needs to become its own `'use client'` component.
Warning: Each child in a list should have a unique "key" prop
You're rendering an array with `.map()` but not passing a `key` prop to each element, or you're using the array index as the key on a list that can reorder. Give each item a stable, unique `key` from your actual data — usually an `id` field.
Error: Maximum update depth exceeded
A state update is triggering a re-render that triggers the same update again, looping forever. The most common cause is calling `setState` directly in the render body, or inside a `useEffect` with a dependency array that changes every render.
Error: Only plain objects can be passed to Client Components from Server Components
You're passing something non-serializable — a class instance, a Date in some cases, a function, or a Prisma model with methods attached — as a prop from a Server Component to a Client Component. Convert it to a plain object first, usually with `JSON.parse(JSON.stringify(data))` or by manually picking the fields you need.
Error: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`
Reading `cookies()`, `headers()`, or `searchParams` inside a page Next.js is trying to statically generate forces that route to render dynamically instead. If that's intended, add `export const dynamic = 'force-dynamic'` to opt in explicitly rather than letting the build warn about it.
TypeScript error: Cannot find module 'X' or its corresponding type declarations
Either the package isn't installed, or it doesn't ship its own TypeScript types and you're missing the matching `@types/` package. Try installing `@types/<package-name>` — if that package doesn't exist either, the library likely has no type support and you'll need a manual type declaration.
TypeScript error: Property does not exist on type 'never'
TypeScript narrowed a union type down to `never` — usually because a type guard eliminated every possible case, or two incompatible branches were merged. Check the type guard's conditions; there's almost always a logic mistake making the narrowing too aggressive.
TypeScript error: Object is possibly 'null'
TypeScript's strict null checks flag any value that could be `null` before you use it. Narrow the type first with an `if` check, optional chaining (`?.`), or a non-null assertion (`!`) only when you're certain the value can't actually be null at that point.
Error: Hydration failed because the server rendered HTML didn't match the client
This happens when the HTML generated on the server differs from what React renders on the client. Common causes: using `Date`/`Math.random()` during render, browser extensions modifying the DOM, or missing `suppressHydrationWarning` on elements that legitimately differ (like formatted timestamps).
Error: Route used `params.slug`. `params` should be awaited before using its properties
In Next.js 15+ (including 16), `params` and `searchParams` in Server Components are Promises. Add `await` before reading any property from them, and type them as `Promise<{ slug: string }>` instead of a plain object.