Prerender Error with Next.js
Why This Error Occurred
While prerendering a page during next build
, an error occurred. This can happen for various reasons, including:
- 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
orgetStaticPaths
Possible Ways to Fix It
1. Ensure correct file structure and use App Router for colocation
Pages Router
In the Pages Router, only special files are allowed to generate pages. You cannot colocate other files (e.g., components, styles) within the pages
directory.
Correct structure:
pages/
├── index.js
└── about.js
components/
└── Header.js
styles/
└── globals.css
App Router (Next.js 13+)
The App Router allows colocation of pages and other files in the same folder. This provides a more intuitive project structure.
Example folder structure:
app/
├── layout.tsx
├── page.tsx
├── about/
│ └── page.tsx
└── blog/
├── page.tsx
└── PostCard.tsx
2. Handle undefined props and missing data
Pages Router
For the Pages Router, use conditional checks and return appropriate props or a 404 page:
export async function getStaticProps(context) {
const data = await fetchData(context.params.id)
if (!data) {
return {
notFound: true,
}
}
return {
props: { data },
}
}
3. Handle fallback in dynamic routes
If you're using fallback: true
or fallback: 'blocking'
in getStaticPaths
, ensure your page component can handle the loading state:
import { useRouter } from 'next/router'
function Post({ post }) {
const router = useRouter()
if (router.isFallback) {
return <div>Loading...</div>
}
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
)
}
4. Avoid exporting pages with server-side rendering
If you're using next export
or output: 'export'
in your next.config.js
, ensure that none of your pages use getServerSideProps
. Instead, use getStaticProps
for data fetching:
export async function getStaticProps() {
const res = await fetch('https://api.vercel.app/blog')
const data = await res.json()
return {
props: { data },
revalidate: 60,
}
}
5. Disable server-side rendering for components using browser APIs
If a component relies on browser-only APIs like window
, you can disable server-side rendering for that component:
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/BrowserOnlyComponent'),
{ ssr: false }
)
export default function Page() {
return (
<div>
<h1>My page</h1>
<DynamicComponentWithNoSSR />
</div>
)
}
Additional Resources
If you continue to experience issues after trying these solutions, consider checking your server logs for more detailed error messages or reaching out to the Next.js community for support.
Was this helpful?