Next.js Prerender Error during next build

What it means in plain English

Next.js's Prerender Error page says an error occurred while prerendering a page during next build. The build stops on that page.

Likely causes

Next.js lists these reasons:

• Incorrect file structure or non-page files in the pages/ directory.
• Expecting props to be populated which are not available during prerendering.
• Using browser-only APIs in components without proper checks.
• Incorrect configuration in getStaticProps or getStaticPaths.

How to fix it, step by step

1. Get the full stack trace. Next.js says this command gives unminified stack traces with source maps, so you can find the exact component and route:

next build --debug-prerender

2. In the Pages Router, only special files can generate pages. Move components and styles out of pages/. The App Router allows colocation of pages and other files in the same folder.
3. Handle missing data. In getStaticProps, Next.js's example returns { notFound: true } when the data is missing, and returns props otherwise.
4. With fallback: true or fallback: 'blocking' in getStaticPaths, make the page handle the loading state. Next.js's example checks router.isFallback.
5. With next export or output: 'export', no page can use getServerSideProps. Use getStaticProps instead.
6. If a component uses browser-only APIs like window, load it with next/dynamic and { ssr: false }. See also window is not defined.
7. If it still fails, Next.js says to check your server logs for more detailed error messages.

How to check it worked

• next build finishes without the prerender error.
• The route that failed builds and opens.

Sources

• https://nextjs.org/docs/messages/prerender-error (opens in a new tab)