nextjs
Next/Image hostname not configured
Invalid src prop.*hostname .+ is not configured under images in.*next\.config
Fixes
- 1.Add the image hostname to `images.remotePatterns` in next.config.js
- 2.Use `images: { remotePatterns: [{ protocol: 'https', hostname: 'example.com' }] }`
- 3.For local images, import them directly: `import img from './image.png'`
image-optimizationconfignext-image
Related Errors
nextjs3 fixes
Next.js hydration mismatch
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
nextjs3 fixes
window/document not defined in SSR
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 })`
nextjs3 fixes
Client component feature used in server component
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