SSG - How to localize/i18n the Next.js 404 page?

[Vadorequest]

The pages/404.tsx page allows to customise the 404 error displayed to the end user.

See https://nextjs.org/docs/advanced-features/custom-error-page#404-page

But, since it lives in /pages and not /pages/[locale] as do my other Pages, it doesn't benefit from i18n support.

I have successfully displayed the 404 page, but it's the same for all languages (no i18n support).

I tried to use getStaticPaths, but got getStaticPaths can only be used with dynamic pages, not '/404'.

I'm looking for recommandations about how to build a 404 i18n-friendly page using SSG, it shouldn't be that hard.

/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import * as Sentry from '@sentry/node';
import { createLogger } from '@unly/utils-simple-logger';
import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
import React from 'react';
import PageLayout from '../components/PageLayout';
import { LayoutPageProps } from '../types/LayoutPageProps';
import { StaticParams } from '../types/StaticParams';
import { StaticProps } from '../types/StaticProps';
import { DEFAULT_LOCALE, LANG_EN, LANG_FR } from '../utils/i18n';
import { getCommonStaticPaths, getCommonStaticProps } from '../utils/SSG';

const fileLabel = 'pages/404';
const logger = createLogger({ // eslint-disable-line no-unused-vars,@typescript-eslint/no-unused-vars
  label: fileLabel,
});

/**
 * Only executed on the server side at build time.
 *
 * Note that when a page uses "getStaticProps", then "_app:getInitialProps" is executed (if defined) but not actually used by the page,
 * only the results from getStaticProps are actually injected into the page (as "StaticProps").
 *
 * @return Props (as "StaticProps") that will be passed to the Page component, as props
 *
 * @see https://github.com/zeit/next.js/discussions/10949#discussioncomment-6884
 * @see https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
 */
export const getStaticProps: GetStaticProps<StaticProps, StaticParams> = getCommonStaticProps;

type Props = {} & StaticProps;

const Fr404 = (): JSX.Element => {
  return (
    <>
      <h1>Page non trouvée</h1>

      <p>
        La page que vous recherchez n'existe pas
      </p>
    </>
  );
};

const En404 = (): JSX.Element => {
  return (
    <>
      <h1>Page not found</h1>

      <p>
        The page you're looking for doesn't exist
      </p>
    </>
  );
};

/**
 * "404 not found" page, doesn't support i18n
 *
 * Doesn't use "getStaticPaths" because it's not supported by Next.js "getStaticPaths can only be used with dynamic pages, not '/404'."
 *
 * XXX The "locale" cannot be resolved properly using SSG on 404 pages, because this file doesn't belong to the "/[locale]" folder and thus doesn't benefit from url rewriting
 *  Therefore, the page will be displayed based on the DEFAULT_LOCALE value and not on the actual end-user locale
 *
 * @param props
 * @see https://nextjs.org/docs/advanced-features/custom-error-page#404-page
 */
const NotFound404Page: NextPage<Props> = (props): JSX.Element => {
  Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs
    category: fileLabel,
    message: `Rendering ${fileLabel}`,
    level: Sentry.Severity.Warning, // Use warning
  });

  return (
    <PageLayout
      pageName={'404'}
      headProps={{
        title: '404 Not Found - Next Right Now',
      }}
      {...props}
    >
      {
        (layoutPageProps: LayoutPageProps): JSX.Element => {
          const { router } = layoutPageProps;
          const locale = router?.asPath?.split('/')?.[1] || DEFAULT_LOCALE;
          const lang: string = locale.split('-')?.[0];

          // We can display a custom message based on the lang, but the other parts of the app won't be translated (nav, footer)
          // Also, it has to be hardcoded, it cannot be stored on Locize, because we don't have access to translations from other languages
          return (
            <div
              css={css`
                text-align: center;
              `}
            >
              {
                lang === LANG_FR && (
                  <Fr404 />
                )
              }
              {
                lang === LANG_EN && (
                  <En404 />
                )
              }
            </div>
          );
        }
      }
    </PageLayout>
  );
};

export default NotFound404Page;

See:
https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-1w6t2bwrm.now.sh/en/test
https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-1w6t2bwrm.now.sh/test
https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-1w6t2bwrm.now.sh/fr/test

[Toolo]

👍 to this question

[marlonmarcello]

Localization is a big pain atm.

[AliEmili]

I'm dealing with this issue either. Thanks for informing this as an issue.

[Vadorequest]

I believe this will be solved when this RFC comes to life. #17078

[M1ck0]

I think that you could send the user to another page when he visits 404 and then do translations there

You can use this to do that.

[la55u]

But how do you know where to redirect the user? The original 404 page has no locale information.

[M1ck0]

You are going to make _error.js page on which is user redirected when error happens. Then you are going to add this in next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/_error',
        destination: '/another_error_page',
        permanent: true,
      },
    ]
  },
}

Which will redirect him to /another_error_page instead of the default 404 page, which will be located in /pages/[locale] where you can actually use getInitialProps or getStaticPath.

Could this flow work?

[la55u]

The rewrite has no :locale parameter in the destination url. How do I know which locale to translate another_error_page then?
Unless you mean en/another_error_page but then you'd have to make this for every locale and the rewrites would be ambigous.

[rokinsky]

1. Pass all translations as props to the error page
2. Extract the current locale while rendering the error component (e.g. using next/router) and select the needed translation

[a14m]

The solution to this is a bit convoluted but it can be done by passing the translations hash to the 404 page... the static 404 will be build as the fallback language (during build time)... and then pass the desired language to override the 404 page translations when availalbe... this will look something roughly like the following

// src/pages/404.tsx
const ErrorPage = ({ translations }: { translations?: Dictionary }) => {
  return (
    <>translations["pageNotFound"]</>
  );
};

// NOTE: nextjs only allow static 404 pages, and they are compiled during build time
export const getStaticProps: GetStaticProps = async () => {
  const translations = await getTranslations(Languages.EN);
  return {
    props: {
      translations,
    },
  };
};

export default ErrorPage;

then provide a dynamic catch all route

// src/pages/[...lng].tsx
import Error from "@src/pages/404";

const CatchAllPage = ({ translations }: { translations?: Dictionary }) => {
  return <Error translations={translations} />;
};

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const { lng } = params!;
  // Parse the URL and fall back to a default language, this to handle the case of /test or /ch/test to fallback to English 
  // and /fr/test to fallback to `fr`
  const language = getErrorPageLanguage(lng![0]);
  const translations = await getTranslations(langauge);
  return {
    props: {
      translations,
    },
  };
};

export default CatchAllPage;

and from any route you can basically call the translations dictionary and pass it to the page components to handle routes like /fr/users/non-existant

the getErrorPageLanguage is implemented as follows (if you are interested)

enum Languages {
  EN = "en",
  DE = "de",
}
export const SUPPORTED_LANGUAGES: string[] = [Languages.EN, Languages.DE];
export const getErrorPageLanguage = (lng: string | string[] | undefined) => {
  let language = lng;
  if (!SUPPORTED_LANGUAGES.includes(lng as string)) {
    language = Languages.EN;
  }
  return language;
};

TL;DR:

• static 404 with a default fallback language
• catch all route with getting the error in desired language (from params or cookie or whatever) and fallback to the fallback language when cannot figure the language
• allways call the 404 page components with the translation hash passed to it (to override the fallback language when possible)

[abolfazlakbarzadeh]

This solution worked for me, thanks a lot! :)

[Mistovic]

For me as well, because I have application that is on next.js 12.1. It works well. Thanks!

[TommySorensen]

Was this ever solved with the new i18 support?

[johnyleebrown]

@ijjk Hi👋 Is there any updates for _error page?

[TommySorensen]

@johnyleebrown Yes, with latest version (10.0.9). You can now have a static 404 page with locale. Same with error 500 page 👍

[eman-ejaz]

@TommySorensen is there any update regarding the localization for _error page? if yes, can you please guide me through the process a little?
Thanks

[TommySorensen]

@eman-ejaz Did you implement the getStaticPropsfor the error 500 page like mentioned in docs here https://nextjs.org/docs/advanced-features/custom-error-page#500-page ?

[eman-ejaz]

@TommySorensen thankyou you typing back. Yes, I have tried with getStaticProps but still I am not able to localise my _error.js page.
Below is my code

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"])) }
    }
}

[gfortaine]

As per suggested by the documentation for Custom Error Page, it looks like that we should pass a title prop to the Error component. And it seems to be working like a charm by taking this example from next-translate

import Error from 'next/error';
import useTranslation from 'next-translate/useTranslation';

export default function Custom404() {
  const { t } = useTranslation();
  const errorMessage = t`error:404`

  return <Error statusCode={404} title={errorMessage} />
}

[DominicF96]

Error pages are extremely low value but they should at least be functional. The fact that we have to put in extra effort to setup a different translation system for error pages for this is really bad.

[stormsson]

Is it my impression or this is still a pain with the new app router too ?
it's still not possible to just create the notfound.tsx route in a dynamic route like [lang]/notfound.tsx, right ?

if i'm not mistaken you can create the file, but you have no way to access the parameters related to the route, like [lang] in the previous sample route

[seho0808]

You can put it in @/not-found.tsx and do it with the lang parameter on the html tage like: <html lang="ko">
but it feels a bit hacky since 404 page is only one that uses a different system to translate stuff.
You would have to manually get the lang parameter in the 404 page to function it correctly.

[stormsson]

i don't think this works; for example if i need an editorial content on the 404 to give the users the typical "maybe you were looking for ..." , these are links/contents that are language-dependant.

is there a workaround to provide a 404 http status from a different page rendering ?
because this would solve everything

[seho0808]

You were right that putting stuff in html lang doesn't work.
I checked myself and found a workaround. I'll post it below and tag you.

[laurenskling]

Did anyone manage to find a solution? I'm currently struggling with this

[seho0808]

For anyone that needs a workaround for app router, there is one possible approach.
Place the file below in the app folder outside of [lang] and it should work. (so it would be app/not-found.tsx)

export default function NotFound() {
  // if you dont have this check, it cannot build. because document is not defined in server side.
  if (typeof document !== "undefined") {
    const currentLang = document.location.pathname.substring(1, 3);
    if (currentLang === "en") {
      return <div> this is for english</div>;
    }
    if (currentLang === "ko") {
      return <div> this is for korean</div>;
    }
    if (currentLang === "ja") {
      return <div> this is for japanese</div>;
    }
}

@stormsson Here is a workaround.

[mimccio]

I hope that we could put not-found.tsx in the [lang] directory soon but in the meantime, as a workaround, I've created a dummy RootLayout and app/[lang]/not-found/page.tsx and redirect to "/not-found" in not-found.tsx.

// layout.tsx
interface Props {
  children: React.ReactNode
}

export default function RootLayout({ children }: Props) {
  return <>{children}</>
}

// not-found.tsx
import { redirect } from 'next/navigation'

export default function NotFound() {
  redirect('/not-found')
}

or

// not-found.tsx
'use client'

import { redirect, usePathname } from 'next/navigation'

const notFoundPath = '/not-found'

export default function NotFound() {
  const pathname = usePathname()
  // Prevent infinite redirect in case not-found page does not exist
  if (pathname === notFoundPath) {
    console.error('not-found page does not exist')
    redirect('/')
  }
  redirect(notFoundPath)
}

@stormsson hope it helps :)

[rayorole]

This approach worked for me. Thank you

[haola1210]

u save my night. thank u, my hero

[wesnolte]

I'm using the 404 and 500 pages which are easy to translate because they both can use getStaticProps. But it looks as though lots of people are having an issue setting this up and I'm wondering if I've missed something. In my case:

If a user is on a page that has a particular locale and then tries to visit a page that doesn't exist then the locale of the previous page "sets" the locale of the 404 (or 500) page which is then translated and served from /[locale]/404

[laurenskling]

it's different in the App Router.

[wesnolte]

Thanks for confirmation. I'd thought that might be the case but there's mention of /pages in this thread.