I want to have a customized _error page for my Next js project. I am using getServerSideProps method for my other pages to localize, but for _error page I am not able to translate the strings, I tried using the getStaticProps method as well, but could not get any different result.
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"])) }
}
}