Common Next.js Errors
Next.js-specific errors including App Router issues, server component errors, hydration mismatches, and build failures.
60 errors documented with step-by-step fixes
Hydration mismatch Next.js
Hydration failed because initial UI does not matchServer and client HTML don't match.
useState server component Next.js
useState only works in Client ComponentsYou used a hook in a server component without 'use client'.
Event handlers server component Next.js
Event handlers cannot be passed to Server ComponentsonClick and other handlers don't work in server components.
Dynamic server usage headers Next.js
Dynamic server usage: headersAccessing headers() in a static page forces it to be dynamic.
Not found Next.js
NEXT_NOT_FOUNDThe notFound() function was called.
Module not found alias Next.js
Module not found: Can't resolve '@/components'TypeScript path aliases aren't configured.
Headers requestAsyncStorage Next.js
Error: Invariant: headers() expects to have requestAsyncStorageheaders() was called outside of a request context.
generateStaticParams error Next.js
generateStaticParams must return an arrayThe function returned the wrong type.
Image optimization loader Next.js
Image optimization using default loader not compatibleDefault image optimization isn't available on static export.
Redirect error Next.js
NEXT_REDIRECTredirect() throws an error that Next.js catches internally.
Edge Runtime unsupported API Next.js middleware
Middleware error: Edge Runtime does not supportMiddleware runs on Edge Runtime which has limited APIs.
useContext null Next.js
Cannot read properties of null (reading 'useContext')A provider is missing or component rendered on wrong side.
SSR error Next.js
Error during SSR/SSGAn error occurred during server-side rendering.
useSearchParams Suspense Next.js
useSearchParams should be wrapped in SuspenseuseSearchParams causes a static page to bail to client-side rendering.
Next Link children error
next/link must have only one childThe Link component received multiple children.
Page changed from static to dynamic during rendering in Next.js
Error: Page changed from static to dynamic during renderingThis Next.js error occurs when page changed from static to dynamic during rendering. Check the stack trace for the exact location and fix the root cause.
Dynamic server usage: cookies() in Next.js
Error: Dynamic server usage: cookies()This Next.js error occurs when cookies(). Check the stack trace for the exact location and fix the root cause.
Dynamic server usage: unstable_noStore() in Next.js
Error: Dynamic server usage: unstable_noStore()This Next.js error occurs when unstable_nostore(). Check the stack trace for the exact location and fix the root cause.
Metadata export is not supported in Client Components in Next.js
Error: Metadata export is not supported in Client ComponentsThis Next.js error occurs when metadata export is not supported in client components. Check the stack trace for the exact location and fix the root cause.
generateMetadata is not supported in Client Components in Next.js
Error: generateMetadata is not supported in Client ComponentsThis Next.js error occurs when generatemetadata is not supported in client components. Check the stack trace for the exact location and fix the root cause.
fetch failed in Server Component in Next.js
Error: fetch failed in Server ComponentThis Next.js error occurs when fetch failed in server component. Check the stack trace for the exact location and fix the root cause.
Route Handler returned no response in Next.js
Error: Route Handler returned no responseThis Next.js error occurs when route handler returned no response. Check the stack trace for the exact location and fix the root cause.
middleware.ts must export a middleware function in Next.js
Error: middleware.ts must export a middleware functionThis Next.js error occurs when middleware.ts must export a middleware function. Check the stack trace for the exact location and fix the root cause.
You're importing a component that needs useState from Server in Next.js
Error: You're importing a component that needs useState from Server ComponentThis Next.js error occurs when you're importing a component that needs usestate from server component. Check the stack trace for the exact location and fix the root cause.
You're importing a component that needs useEffect from Serve in Next.js
Error: You're importing a component that needs useEffect from Server ComponentThis Next.js error occurs when you're importing a component that needs useeffect from server component. Check the stack trace for the exact location and fix the root cause.
You're importing a component that needs createContext from S in Next.js
Error: You're importing a component that needs createContext from Server ComponentThis Next.js error occurs when you're importing a component that needs createcontext from server component. Check the stack trace for the exact location and fix the root cause.
async/await is not yet supported in Client Components in Next.js
Error: async/await is not yet supported in Client ComponentsThis Next.js error occurs when async/await is not yet supported in client components. Check the stack trace for the exact location and fix the root cause.
Only Server Components can be async in Next.js
Error: Only Server Components can be asyncThis Next.js error occurs when only server components can be async. Check the stack trace for the exact location and fix the root cause.
Cannot read properties of undefined (reading 'headers') in Next.js
Error: Cannot read properties of undefined (reading 'headers')This Next.js error occurs when cannot read properties of undefined (reading 'headers'). Check the stack trace for the exact location and fix the root cause.
Cannot read properties of null (reading 'useRouter') in Next.js
Error: Cannot read properties of null (reading 'useRouter')This Next.js error occurs when cannot read properties of null (reading 'userouter'). Check the stack trace for the exact location and fix the root cause.
NextRouter was not mounted (Pages Router in App Router) in Next.js
Error: NextRouter was not mounted (Pages Router in App Router)This Next.js error occurs when nextrouter was not mounted (pages router in app router). Check the stack trace for the exact location and fix the root cause.
useRouter only works in Client Components in Next.js
Error: useRouter only works in Client ComponentsThis Next.js error occurs when userouter only works in client components. Check the stack trace for the exact location and fix the root cause.
notFound() is not allowed during render in Next.js
Error: notFound() is not allowed during renderThis Next.js error occurs when notfound() is not allowed during render. Check the stack trace for the exact location and fix the root cause.
redirect() is not allowed during render in Next.js
Error: redirect() is not allowed during renderThis Next.js error occurs when redirect() is not allowed during render. Check the stack trace for the exact location and fix the root cause.
revalidatePath must be called during request in Next.js
Error: revalidatePath must be called during requestThis Next.js error occurs when revalidatepath must be called during request. Check the stack trace for the exact location and fix the root cause.
Incremental Static Regeneration requires a fallback in Next.js
Error: Incremental Static Regeneration requires a fallbackThis Next.js error occurs when incremental static regeneration requires a fallback. Check the stack trace for the exact location and fix the root cause.
ISR page returned statusCode 500 in Next.js
Error: ISR page returned statusCode 500This Next.js error occurs when isr page returned statuscode 500. Check the stack trace for the exact location and fix the root cause.
getStaticPaths is required for dynamic SSG pages in Next.js
Error: getStaticPaths is required for dynamic SSG pagesThis Next.js error occurs when getstaticpaths is required for dynamic ssg pages. Check the stack trace for the exact location and fix the root cause.
getServerSideProps cannot be used with getStaticProps in Next.js
Error: getServerSideProps cannot be used with getStaticPropsThis Next.js error occurs when getserversideprops cannot be used with getstaticprops. Check the stack trace for the exact location and fix the root cause.
Image with src has invalid height or width property in Next.js
Error: Image with src has invalid height or width propertyThis Next.js error occurs when image with src has invalid height or width property. Check the stack trace for the exact location and fix the root cause.
Invalid src prop on next/image in Next.js
Error: Invalid src prop on next/imageThis Next.js error occurs when invalid src prop on next/image. Check the stack trace for the exact location and fix the root cause.
next/image unconfigured host in Next.js
Error: next/image unconfigured hostThis Next.js error occurs when next/image unconfigured host. Check the stack trace for the exact location and fix the root cause.
Missing required error component in Next.js
Error: Missing required error componentThis Next.js error occurs when missing required error component. Check the stack trace for the exact location and fix the root cause.
Conflicting app and page files were found in Next.js
Error: Conflicting app and page files were foundThis Next.js error occurs when conflicting app and page files were found. Check the stack trace for the exact location and fix the root cause.
You cannot dot into a client module from a server component in Next.js
Error: You cannot dot into a client module from a server componentThis Next.js error occurs when you cannot dot into a client module from a server component. Check the stack trace for the exact location and fix the root cause.
Unhandled Runtime Error in development in Next.js
Error: Unhandled Runtime Error in developmentThis Next.js error occurs when unhandled runtime error in development. Check the stack trace for the exact location and fix the root cause.
Failed to compile Next.js application in Next.js
Error: Failed to compile Next.js applicationThis Next.js error occurs when failed to compile next.js application. Check the stack trace for the exact location and fix the root cause.
Build error occurred: Export encountered errors in Next.js
Error: Build error occurred: Export encountered errorsThis Next.js error occurs when export encountered errors. Check the stack trace for the exact location and fix the root cause.
Pages directory and app directory conflict in Next.js
Error: Pages directory and app directory conflictThis Next.js error occurs when pages directory and app directory conflict. Check the stack trace for the exact location and fix the root cause.
Chunk loading failed in Next.js
Error: Chunk loading failedThis Next.js error occurs when chunk loading failed. Check the stack trace for the exact location and fix the root cause.
Loading chunk failed (dynamic import) in Next.js
Error: Loading chunk failed (dynamic import)This Next.js error occurs when loading chunk failed (dynamic import). Check the stack trace for the exact location and fix the root cause.
NEXT_PUBLIC env var is undefined at runtime in Next.js
Error: NEXT_PUBLIC env var is undefined at runtimeThis Next.js error occurs when next_public env var is undefined at runtime. Check the stack trace for the exact location and fix the root cause.
Environment variable not available at build time in Next.js
Error: Environment variable not available at build timeThis Next.js error occurs when environment variable not available at build time. Check the stack trace for the exact location and fix the root cause.
Cannot find module 'next/headers' in pages directory in Next.js
Error: Cannot find module 'next/headers' in pages directoryThis Next.js error occurs when cannot find module 'next/headers' in pages directory. Check the stack trace for the exact location and fix the root cause.
next.config.js is invalid in Next.js
Error: next.config.js is invalidThis Next.js error occurs when next.config.js is invalid. Check the stack trace for the exact location and fix the root cause.
Webpack 5 compilation error in Next.js
Error: Webpack 5 compilation errorThis Next.js error occurs when webpack 5 compilation error. Check the stack trace for the exact location and fix the root cause.
Turbopack compilation error in Next.js
Error: Turbopack compilation errorThis Next.js error occurs when turbopack compilation error. Check the stack trace for the exact location and fix the root cause.
Static generation failed for route in Next.js
Error: Static generation failed for routeThis Next.js error occurs when static generation failed for route. Check the stack trace for the exact location and fix the root cause.
Edge Runtime does not support Node.js modules in Next.js
Error: Edge Runtime does not support Node.js modulesThis Next.js error occurs when edge runtime does not support node.js modules. Check the stack trace for the exact location and fix the root cause.
Invariant: Method expects to have requestAsyncStorage in Next.js
Error: Invariant: Method expects to have requestAsyncStorageThis Next.js error occurs when method expects to have requestasyncstorage. Check the stack trace for the exact location and fix the root cause.
Bugsly catches Next.js errors automatically
AI-powered error tracking that explains what went wrong and suggests fixes. Set up in 2 minutes.
Get Started Free