I am working a project using TypeScript and Next.js. The website is extremely so far simple and only contains a few pages, I keep getting the following error when running next build on my project:
Automatically optimizing pages .
Error occurred prerendering page "/404". Read more: .js/prerender-error:
Error: Error for page /_error: pages with `getServerSideProps` can not be exported. See more info here: .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 '../ponents/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;
I am working a project using TypeScript and Next.js. The website is extremely so far simple and only contains a few pages, 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 '../ponents/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;
2 Answers
Reset to default 1_error.tsx it's not a regular page but a ponent to initialize error pages.
Try to use Error.getInitialProps instead of getServerSideProps.
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}
Also, you should return an object without props nesting when using Error.getInitialProps.
Customizing The Error Page
create _error.tsx file at the root of your pages folder and populate it with these and run yarn build or push to deployment.
import Error from 'next/error';
function Page({ statusCode }: any) {
return <Error statusCode={statusCode}></Error>;
}
Page.getInitialProps = ({ res, err }: { res: any; err: any }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
export default Page;