How do you only load the namespace files for the domain you are currently on?

[rolandjlevy]

Hi @aralroca

If I have 5 active domains, when _app.js loads the '*' namespace files do the files from all locales get loaded when you visit each domain?

For example, if someone visits the .hu domain I only want to load the namespace files from the hu locale - not all of them. Is that the the case?

If not, is there a way of detecting the domain at that point so I can only load the namespace files which only correspond to the domain you are currently on?

Here is the relevant part of my i18n.js file. When I log currentDomain I get undefined because there is no window object at that point.

const defaultLocale = 'en-gb';

module.exports = {
  locales: ['cs-cz', 'en-gb', 'hu', 'pl', 'ro'],
  defaultLocale,
  extensionsRgx: /\.(tsx|ts|js|mjs|jsx)$/,
  keySeparator: '.',
  loadLocaleFrom: (lang, ns) => {
    const currentDomain =
      typeof window !== 'undefined' ? window.location.hostname : null;
    console.log({ lang, ns, currentDomain });
    const defaultNs = require(`./locales/${defaultLocale}/${ns}.json`);
    if (lang === defaultLocale) {
      return Promise.resolve(defaultNs).catch((e) => console.log(e));
    }
    try {
      const localNs = require(`./locales/${lang}/${ns}.json`);
      return Promise.resolve({
        ...defaultNs,
        ...localNs,
      }).catch((e) => console.log(e));
    } catch (err) {
      return Promise.resolve(defaultNs).catch((e) => console.log(e));
    }
  },
  pages: {
    '*': [
      'common',
      'search',
      'form-error-text',
      'reusable-components',
      'snackbar-alert-messages',
      'constants-and-reusable-functions',
      'account-menu-and-overview',
      'checkout',
      'orders-processing',
      'header',
      'basket',
    ]
};

Thanks!
Roland

[aralroca]

I think you are looking for Domain Routing, this is part of Next.js routing part:

• https://nextjs.org/docs/pages/building-your-application/routing/internationalization#domain-routing

I understand that it can be useful if you set each domain to have a different defaultLocale and define there the locales for each domain.

[aralroca]

The namespaces are loaded dynamically depending on their usage. They will all be prepared in build time, but if your domain only uses 1 language, it will only load the namespaces of this language. If another language is supported and you navigate to this other language, then the namespaces of this new language will be loaded. This is how it is intended to act.

[rolandjlevy]

Hi @aralroca

Thank you

This image shows an analysis of our application, with all languages being loaded within locales in the _app.js chunk.

We don't do domain-specific builds. We do one build for everything in our application.

After the build, in _app.js is there a way of only consuming the files you need for each individual domain?

Full analysis

analysis of locales only

[aralroca]

The purpose of defining the namespaces per page is that it should only load the namespaces that the page needs and only in the selected language. If it is not working, it is because it is an issue. I think it is reported. Now for Next-translate 3.0 we are focusing on another approach to load things and make it work with Next.js 15. I hope to dedicate more time soon as I know it is now some time since the last release.

If you are using "*", maybe you can do it in a different way to solve it, like using a regex maybe?

[aralroca]

Or something like this (only works if you have getServerSideProps or getInitialProps):

 '*': (req) => {
   // return depending some logic
 } 

[rolandjlevy]

HI @aralroca

Thanks - I can log the value of the host on SSR pages, like this:

  pages: {
    '*': (data) => {
      console.log('host:', data?.req?.headers?.host);
      return [
        'common',
        'search',
        'header',
        'basket',
      ];
    },

This is helpful but doesn't address the issue I mentioned.

Instead, I've got an idea of fetching the translation data from inside loadLocaleFrom and then writing that data to a file inside the locale folder for that domain, as shown below.

It solves the problem I mentioned which is having all the namespace files included within the build as this is affecting page load speeds for _app.js. With this approach I described, the namespace files are only loaded as and when they are needed, and this greatly reduces the size of the build.

I am just using https://jsonplaceholder.typicode.com for proof of concept.

A question: with this approach are there any issues you think I need to be aware of?

const axios = require('axios');
const fs = require('fs').promises;
const path = require('path');

const writeDataToFile = async ({ data, destinationFilePath }) => {
  const destination = path.resolve(process.cwd(), destinationFilePath);
  try {
    const fileExists = await fs
      .access(destination)
      .then(() => true)
      .catch((err) => {
        if (err.code === 'ENOENT') {
          return false;
        }
      });

    if (fileExists) {
      return;
    }
    await fs.writeFile(destination, JSON.stringify(data, null, 2));
  } catch (err) {
    console.error(err);
    throw new Error(err);
  }
};

const defaultLocale: 'en-gb';

module.exports = {
  i18n: {
    locales: ['cs-cz', 'en-gb', 'hu', 'pl', 'ro'],
    defaultLocale,
    extensionsRgx: /\.(tsx|ts|js|mjs|jsx)$/,
    keySeparator: '.',
    loadLocaleFrom: async (lang, ns) => {
      // API call to fetch translations data for comments.json
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/comments?postId=2'
      );

      // if namespace file doesn't exist, write translation data to namespace file in locales folder.
      await writeDataToFile({
        data: response.data,
        destinationFilePath: `./locales/${lang}/comments.json`,
      });
      const defaultNs = require(`./locales/${defaultLocale}/${ns}.json`);
      if (lang === defaultLocale) {
        return Promise.resolve(defaultNs).catch((e) => console.log(e));
      }
      try {
        const localNs = require(`./locales/${lang}/${ns}.json`);
        return Promise.resolve({
          ...defaultNs,
          ...localNs,
        }).catch((e) => console.log(e));
      } catch (err) {
        return Promise.resolve(defaultNs).catch((e) => console.log(e));
      }
    }
  },
  pages: {
    // 
  }
}