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
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])