While prerendering a page during next build , an error occurred. This can happen for various reasons, including:

Possible Ways to Fix It

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:
├── layout.tsx
├── page.tsx
├── about/
│   └── page.tsx
└── blog/
    ├── page.tsx
    └── PostCard.tsx
2. Handle undefined props and missing data
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 (
      <h1>My page</h1>
      <DynamicComponentWithNoSSR />
    </div>
Additional Resources