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

1 reply

nfantone Mar 10, 2021

In recent updates, this also happens with /500.

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.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error occurred prerendering page "/404" #12246

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Error occurred prerendering page "/404" #12246

Replies: 7 comments · 10 replies

eiskalteschatten Apr 27, 2020 Author

eiskalteschatten Apr 27, 2020 Author

eiskalteschatten Apr 28, 2020 Author

Replies: 7 comments 10 replies

eiskalteschatten
Apr 27, 2020
Author

eiskalteschatten
Apr 27, 2020
Author

eiskalteschatten
Apr 28, 2020
Author