如何处理 Next.js 中动态页面的国际化后备页面？

Question

In Next.js documentation, there is a section for internationalized routing with dynamic routes and getStaticProps pages .

In the provided example, they use the fallback property set to true:

// pages/blog/[slug].js
export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      // if no `locale` is provided only the defaultLocale will be generated
      { params: { slug: 'post-1' }, locale: 'en-US' },
      { params: { slug: 'post-1' }, locale: 'fr' },
    ],
    fallback: true,
  }
}

I have a very similar project with 2 locales: 'en' and 'fr'. Everything is working fine when my blog article does exist. But if the article does not exists (or when the page has not been generated yet at build time), then I display my custom fallback page as explained here .

I could provide my getStaticProps function or fallback page. But it is very similar to the example defined on the doc as well, so very simple.

The issue is that when displaying my fallback page, I do not have any locale yet. So all my translations display keys instead of english or french value (not only for my fallback custom component but the whole main layout/page).

From what I understand the problem is that:

1. Fallback page is displayed until getStaticProps has finished
2. Fallback page props are empty
3. Locale is returned by getStaticProps function

I feel like this should be a common scenario, and maybe I'm missing something. How could I know the locale when displaying the fallback page?

Please note that I use next-i18next on my project. So my URL is either: /articles/[slug] or /fr/articles/[slug] .

Answer 1

You can access the current locale while displaying the fallback page using router.locale from next/router .

// pages/blog/[slug].js
import { useRouter } from 'next/router'

function Blog() {
    const router = useRouter()

    if (router.isFallback) {
        return <div>{`Loading ${router.locale} fallback page...`}</div>
    }

    return <div>Blog page</div>
}