Looking to create a customized error page for my Next.js project. I've been using the getServerSideProps method to localize my other pages, but I'm running into issues with translating strings on the _error page. I attempted to use the getStaticProps method as well, but haven't had any luck.
const CustomError = ({ statusCode, hasGetInitialPropsRun, err, pageRootRef }) => {
const { t } = useTranslation(["error", "common"]);
return (
<Layout pageRootRef={pageRootRef}>
<Head>
<title>{t("title")}</title>
</Head>
<div id="_error" className="_error">
<div className="pt-5 pb-6">
<div className="max-w max-640">
<h1 className="mb-2 t-alignC">{t("heading")}</h1>
<Hairline color="green" />
<div className="max-w max-128 mb-5">
<Image
src={`{cdnAssetPrefix}/images/pete/pete-confused.png`}
className="fit"
alt=""
width={128}
height={137}
/>
</div>
<p>
{t("go-back-paragraph.go-back")}{""}
{t("go-back-paragraph.sign-in-again")}
</p>
<div className="t-alignC">
<Link href={LOGIN_URL}>
<a className="btn-link btn-xl">
{t("go-back-paragraph.go-to-login")}
</a>
</Link>
</div>
</div>
</div>
</div>
</Layout>
);
};
export async function getStaticProps({locale}) {
return {
props: { ...(await serverSideTranslations(locale, ["error", "common"])) }
}
}