Next.js & React errors

Your page looked fine a second ago — then a red error, a blank screen, or text that changes the moment the page loads. Most Next.js and React errors aren't you doing something foolish. They're a mismatch between what renders on the server and in the browser, a hook used in the wrong place, or a file React can't find. This section walks you through each one in plain English: what caused it, the smallest safe change, and a prompt you can hand to your AI to apply it.

Common culprits: hydration mismatches, hooks called conditionally or in the wrong component, "module not found" errors, client vs. server component mix-ups, and state that resets on every render.

• Too many re-renders: infinite loop caused by useEffect dependencies

  A useEffect that sets state listed in its own dependency array loops forever. Fix it with functional updates, values computed during rendering, or a stable object identity with useMemo.

• Module not found: Failed to resolve import

  Module not found in Vite or Next.js is usually a typo, a capitalisation mismatch, a missing install, a moved file, or an @/ alias set up in only one config. Check them in that order.

• Hydration failed: Text content does not match server-rendered HTML

  Hydration failed in Next.js? Find the server vs client mismatch, move dates and window values into useEffect, fix invalid nesting, and rule out extensions.

• Environment variables are undefined in Next.js (process.env returns undefined)

  process.env returning undefined in Next.js? Check the NEXT_PUBLIC_ prefix, .env.local placement, build-time inlining, and the Vercel dashboard — in that order.