Next.js v10 Internalisation - getStaticProps always return default locale

user_2117550 0
Viewed 2981

I'm trying to setup a new Next.js version project with internalisation based on domain routing.

I have my next.config.js with the following lines:

  i18n: {
    locales: ['de-DE', 'en-US'],
    defaultLocale: 'en-US',
    domains: [
      {
        domain: 'mydomain.com',
        defaultLocale: 'en-US'
      },
      {
        domain: 'mydomain.de',
        defaultLocale: 'de-DE'
      }
    ],
    localeDetection: false
  },

and I have my catch-all-routes page like this:

import React, { Fragment } from 'react';

import * as api from '../api';
import Header from '../components/Header';
import Footer from '../components/Footer';
import Sections from '../components/Sections';

function Page({ page = {} }) {
  return (
    <Fragment>
      <Header />
      <Sections {...page} />
      <Footer />
    </Fragment>
  );
}

export async function getStaticProps(context = {}) {
  const { params = {}, locale } = context;
  const pathname = params.slug ? params.slug.join('/') : '/';
  const page = await api.fetchPage(pathname, locale);

  return {
    props: {
      page
    },
    revalidate: 1
  }
}

export async function getStaticPaths() {
  // this will be generated, hardcoded this pages for testing
  return {
    paths: [
      {
        params: {
          slug: ['produkte']
        },
        locale: 'de-DE'
      },
      {
        params: {
          slug: []
        },
        locale: 'de-DE'
      },
      {
        params: {
          slug: ['products']
        },
        locale: 'en-US'
      },
      {
        params: {
          slug: []
        },
        locale: 'en-US'
      }
    ],
    fallback: true
  };
}

However everytime when I'm trying to preview locally the German version, it returns me English one and I see that inside getStaticProps the value of locale is always en-US. I'm trying to access the page with http://localhost:3000/?__nextLocale=de-DE as an url.

What's missing here to make it work properly?

Thanks!

i18next next.js reactjs internationalization javascript
1 Answers

You need to whitelist localhost as well, otherwise it will fallback to default locale.

so you could do something like this in your next.config.js:

i18n: {
  localeDetection: false,
  locales: ['en-US', 'de-DE'],
  defaultLocale: 'en-US',

  domains: [
    {
      domain: 'localhost:3000',
      defaultLocale:'en-US',
      http: true,
    },
    {
     domain: 'mydomain.com',
      defaultLocale: 'en-US'
    },
    {
      domain: 'mydomain.de',
      defaultLocale: 'de-DE'
    }
  ],
}

Then when accessing localhost, the defaultLocale should define the locale it will open for you.. in this case, en-US.

so in the browser you can see that if you do localhost:3000 it will open in en-US. And also it you can access it english pages under localhost:3000/en-US/

Aaaaand, the german ones will be available under localhost:3000/de-dE.

user_5435750
Related