0

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
Rawand
  • 377
  • 3
  • 11

1 Answers1

0

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])
Rawand
  • 377
  • 3
  • 11