Error occurred prerendering page "/404" #12246

eiskalteschatten · 2020-04-27T16:41:59Z

eiskalteschatten
Apr 27, 2020

I keep getting the following error when running next build on my project:

Automatically optimizing pages .
Error occurred prerendering page "/404". Read more: https://err.sh/next.js/prerender-error:
Error: Error for page /_error: pages with `getServerSideProps` can not be exported. See more info here: https://err.sh/next.js/gssp-export

I don't have a custom 404 page because I want it to be handled by the _error.tsx page since I have server-side redirecting for trailing slashes. This works when running in a development environment, but dies when I try to build it.

Obviously _error.tsx has getServerSideProps and should NOT be a static page, so why is it trying to make it one? It is obviously not meant to be one as according to the Next.js documentation, any page that exports getServerSideProps will not be one. So why is it throwing an error?!?!?!

If it helps, here's the code for my _error.tsx file:

import React, { useEffect } from 'react';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Router from 'next/router';

import { makeStyles, createStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

import useStandardHeaderTags from '../lib/useStandardHeaderTags';
import TitleElement from '../components/TitleElement';

const useStyles = makeStyles(() =>
  createStyles({
    root: {
      textAlign: 'center'
    }
  })
);

interface Props {
  statusCode: number;
}

const Error: React.FC<Props> = ({ statusCode }) => {
  const classes = useStyles();
  const title = statusCode === 404 ? '404' : 'Error';

  return (
    <>
      <Head>
        {useStandardHeaderTags(title)}
      </Head>
      <Container className={classes.root}>
        <TitleElement text={title} />

        {statusCode === 404
          ? 'The page you are looking for could not be found.'
          : 'An error occurred.'}
      </Container>
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ res, req }) => {
  const statusCode = res ? res.statusCode : 404;

  if (statusCode === 404) {
    if (req.url.match(/\/$/)) {
      const withoutTrailingSlash = req.url.substr(0, req.url.length - 1);
      if (res) {
        res.writeHead(303, {
          Location: withoutTrailingSlash
        });
        res.end();
      }
      else {
        Router.push(withoutTrailingSlash);
      }
    }
  }

  return {
    props: {
      statusCode
    }
  };
};

export default Error;

Answered by eiskalteschatten

Apr 28, 2020

I was able to solve it by changing the getServierSideProps function to

Error.getInitialProps = ({ res, req, err }): Props => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

  if (statusCode === 404) {
    if (req.url.match(/\/$/)) {
      const withoutTrailingSlash = req.url.substr(0, req.url.length - 1);
      if (res) {
        res.writeHead(303, {
          Location: withoutTrailingSlash
        });
        res.end();
      }
      else {
        Router.push(withoutTrailingSlash);
      }
    }
  }

  return { statusCode };
};

View full answer

eiskalteschatten · 2020-04-27T16:42:53Z

eiskalteschatten
Apr 27, 2020
Author

As a follow-up: I also saw this discussion #11945, but the answer doesn't help me in anyway because I do not want the error page to be static.

0 replies

eiskalteschatten · 2020-04-27T19:24:54Z

eiskalteschatten
Apr 27, 2020
Author

This can't be proper behavior. I created an issue for it: #12256

0 replies

eiskalteschatten · 2020-04-28T13:52:08Z

eiskalteschatten
Apr 28, 2020
Author

I was able to solve it by changing the getServierSideProps function to

Error.getInitialProps = ({ res, req, err }): Props => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

  if (statusCode === 404) {
    if (req.url.match(/\/$/)) {
      const withoutTrailingSlash = req.url.substr(0, req.url.length - 1);
      if (res) {
        res.writeHead(303, {
          Location: withoutTrailingSlash
        });
        res.end();
      }
      else {
        Router.push(withoutTrailingSlash);
      }
    }
  }

  return { statusCode };
};

0 replies

svassaux · 2020-11-30T16:16:22Z

svassaux
Nov 30, 2020

same issue here, can't solve it easily with initial props

I have the same need because I am localizing my 404 page

works fine otherwise, a 404 or a 500 is handled by the error.tsx, I don't see the point of trying to generate a 404 static page

2 replies

nfantone Mar 10, 2021

In recent updates, this also happens with /500.

chiranjivDev Feb 21, 2025

any updates on this?

quant-daddy · 2021-04-29T15:18:16Z

quant-daddy
Apr 29, 2021

Any updates on this? I'm getting the same error for /500 page

9 replies

3pns Sep 22, 2021

thank you for the fix. I had the same error with the default error pages on next 11.1.0

hamen Oct 4, 2022

It solved it for 400/500, but now I have it on / 🤣

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

🤦

wsasouza Feb 7, 2023

I managed to solve it with this tip! Thank you very much!

LuisValgoi Feb 13, 2024

@wsasouza were you using app router?

ohabash Dec 30, 2024

it didnt work when i made (pages)/error.tsx nor (pages)/_error/404/page.tsx

nemanjam · 2021-12-31T15:45:23Z

nemanjam
Dec 31, 2021

I have similar error on prod build. I don't like the fact that Next.js doesn't report any errors during dev and then when you try to compile for prod a lot of stuff breaks. If prod doesn't compile dev shouldn't compile too.

0 replies

LuisValgoi · 2024-02-13T23:28:11Z

LuisValgoi
Feb 13, 2024

I am facing the same issue when in app router. I have a src/app/dashboard/page.tsx that when I try to throw new Error(), it gives Error occurred prerendering page.

1 reply

mentamarindos Feb 16, 2025

same issue, i also have a dashboard/page.tsx and a middleware.ts to guard that page with auth

YChebotaev · 2025-02-22T16:50:27Z

YChebotaev
Feb 22, 2025

I have similar error, but I don't even have error.tsx or any pages except for layout.tsx. App router, next 15.1.7

0 replies

glneto · 2025-03-07T20:09:04Z

glneto
Mar 7, 2025

The fix in my case was downgrading React to version 18 (was using 19)

0 replies

danidb · 2025-03-12T20:12:09Z

danidb
Mar 12, 2025

I had this issue in a monorepo, with npm, nextjs 15.1.7 and 15.2 and react/react-dom ^19; dev worked but build failed.

I was able to resolve this using npm dedup and updating packages that wanted an older versions of react.

npm dedup, caught that I had two "unresolvable" versions of react/react-dom (19.0.0 and 18.something). In my case, the packages that wanted the older version of react were "vaul" and "next-themes,"; they both support react 19 now. If you're using shadcn/ui you probably also depend on these packages.

4 replies

VulcanTech-io Mar 25, 2025

i had this same problem, thanks for your help

jacob-wt Apr 14, 2025

holy sh*t npm dedupe fixed it 😭 🎉 thank you!

VulcanTech-io Apr 23, 2025

I ran into this problem again upgrading to 15.3.1 downgrading to 15.2.4 and then upgrading again fixed it which is just some black magic f... But in case this helps anyone else thought id post about it.

quangthien27 Sep 6, 2025

npm dedupe fixed it for me too! Make sure react and react-dom have exact same version too

ranaivomahaleo · 2025-04-08T16:47:02Z

ranaivomahaleo
Apr 8, 2025

In my case (next 15.2.4, react 18.3, react-dom 18.3), this error was related to the environment. When using next build be sure that the value of NODE_ENV is set to production or an empty string, otherwise, this prerendering error is appearing.

The simplest way to verify the value of NODE_ENV is using the following command line:

echo $NODE_ENV

If the above command returns an empty string or a string equals to production, the next build can produce the normal behaviour building the next code.
If the above command returns a string which is not equal to production, the prerendering error occured.

1 reply

theboringhumane Aug 10, 2025

This works.

Johanfeliz08 · 2025-10-26T05:05:14Z

Johanfeliz08
Oct 26, 2025

In my case i had the optimizedCss option active on my next.config.ts, i fixed just by removing it.

On next.config.ts, remove:

experimental: {
optimizeCss: true,
}

0 replies

Error occurred prerendering page "/404" #12246

Uh oh!

Uh oh!

Replies: 12 comments · 17 replies

Uh oh!

eiskalteschatten Apr 27, 2020 Author

Uh oh!

eiskalteschatten Apr 27, 2020 Author

Uh oh!

eiskalteschatten Apr 28, 2020 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 12 comments 17 replies

eiskalteschatten
Apr 27, 2020
Author

eiskalteschatten
Apr 27, 2020
Author

eiskalteschatten
Apr 28, 2020
Author