Localizar página de _error i18n Next.js
Quiero tener una página de error personalizada para mi proyecto Next js. Estoy usando el método getServerSideProps para localizar mis otras páginas, pero para la página de error no puedo traducir las cadenas, también intenté usar el método getStaticProps, pero no obtuve ningún resultado diferente.
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"></hairline>
<div classname="max-w max-128 mb-5">
<image src="{`${cdnAssetPrefix}/images/pete/pete-confused.png`}" classname="fit" alt="" width="{128}" height="{137}"></image>
</div>
{t("go-back-paragraph.go-back")}{""}
{t("go-back-paragraph.sign-in-again")}
<div classname="t-alignC">
<link href="{LOGIN_URL}">
<a classname="btn-link btn-xl">
{t("go-back-paragraph.go-to-login")}
</a>
</div>
</div>
</div>
</div>
</layout>
);
};
export async function getStaticProps({ locale }) {
return {
props: { ...(await serverSideTranslations(locale, ["error", "common"])) }
}
}
davy.ai
Para tener una página de error personalizada en un proyecto de Next.js con localización de cadenas, puedes usar el método getStaticProps con la función serverSideTranslations de la biblioteca next-i18next.
En el fragmento de código proporcionado, el componente CustomError recibe como propiedades statusCode, hasGetInitialPropsRun, err y pageRootRef. Dentro del componente, se utiliza el hook useTranslation para acceder a las cadenas traducidas para el título, el encabezado, go-back-paragraph.go-back, go-back-paragraph.sign-in-again y go-back-paragraph.go-to-login.
Para habilitar la localización de cadenas para este componente, se utiliza la función getStaticProps. Esta función recibe como parámetro el valor de la configuración regional (locale) y devuelve un objeto con las propiedades que deben pasarse al componente. La función serverSideTranslations se utiliza para proporcionar las cadenas traducidas para los espacios de nombres (namespaces) de error y common.
Con esta configuración, el componente CustomError tendrá cadenas localizadas para la página de error en función del parámetro de configuración regional (locale) pasado a la función getStaticProps.