Tagged: next16

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·
Deployment

Error: NEXT_PUBLIC_ environment variable is undefined in production but works locally

`NEXT_PUBLIC_` variables are inlined into your JavaScript bundle at build time, not read at runtime. If you added the variable after your last deploy, or only to certain environments, you need to trigger a fresh build for it to take effect.

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·
Deployment

Module not found: Can't resolve './Component' — works locally, fails on Vercel

Your local filesystem (macOS/Windows) is case-insensitive, but Vercel builds on Linux, which is case-sensitive. An import like `./Button` will resolve locally even if the file is actually named `button.tsx`, but fails on deploy. Fix the casing to match exactly.

Draft·
Deployment

Error: ENOENT: no such file or directory, open '.next/routes-manifest.json'

This means the app is trying to start (`next start`) before a full `next build` has actually completed and produced a `.next` folder. Confirm your deploy pipeline runs `next build` first, and that no earlier step in the build silently failed before reaching 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·