Skip to content

Instantly share code, notes, and snippets.

@tiptopcoder

tiptopcoder/_error.tsx

Last active December 9, 2025 18:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tiptopcoder/ee56b81e1d8e0a7e79b755b2d60b72fd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tiptopcoder/ee56b81e1d8e0a7e79b755b2d60b72fd to your computer and use it in GitHub Desktop.
Download ZIP
Next.js Typescript error page
Raw
_error.tsx
import { NextPageContext } from "next";
const Error = ({ statusCode }) => {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: "An error occurred on client"}
</p>
);
};
Error.getInitialProps = ({ res, err }: NextPageContext) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
export default Error;
@tim1uphealth
Copy link

tim1uphealth commented Jun 9, 2021

how would you type the return type for the Error function?

@ediblecode
Copy link

ediblecode commented Jul 5, 2021

@tim1uphealth you mean like this?

import { NextPageContext } from "next";

interface ErrorComponentProps {
	statusCode?: number;
}

function ErrorComponent({ statusCode }: ErrorComponentProps): JSX.Element {
	return (
		<p>
			{statusCode
				? `An error ${statusCode} occurred on server`
				: "An error occurred on client"}
		</p>
	);
}

ErrorComponent.getInitialProps = ({ res, err }: NextPageContext) => {
	const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
	return { statusCode };
};

export default ErrorComponent;

@brandoncroberts
Copy link

brandoncroberts commented Jul 16, 2021

NextPage TypeScript type on the component seems to handle everything.

import { NextPage } from 'next';
const Error: NextPage = () => {......}
Error.getInitialProps = ({ res, err }) => {.....};
export default Error;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment