Search code examples
next.jsnext-i18next

can i make some files always available with next-i18next


I have a Next.js application with next-i18next, I have some files like common.json or ui.json that I want them to be always available in any component or route even if it does not exist, without calling them with SSR or SSG.
For example, the code below is a part of my index page, i want some of these files always be available if that is possible

// src/pages/index.tsx

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale as string, ['ui', 'common', 'home']))
    }
  }
}

next-i18next.config.js:

/** @type {import('next-i18next').UserConfig} */
const i18nConfig = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ckb', 'ar']
  }
}

module.exports = i18nConfig

Solution

  • After searching on the topic and not finding any good results, I came up with making a wrapper function and adding the default translation files names here so I have to only pass the files I need to that function, here is how it looks:

    export const getServerSideTranslations = (
        locale: string,
        names: string[],
        { fetchDefaults = true }: { fetchDefaults?: boolean } = {}
    ) => serverSideTranslations(locale, [...(fetchDefaults ? defaultTranslations : []), ...names])