Tagged: app-router

Nextjs

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.

Draft·
Nextjs

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).

Draft·
Nextjs

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.

Draft·
Nextjs

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.

Draft·
Nextjs

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.

Draft·
Nextjs

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.

Draft·