next-i18next: Fetch data from HTTP api call and apply to resource

Asked Jun 23 '22 at 22:29

Active Jun 24 '22 at 00:20

Viewed 1,151 times

I'm trying to do i18n translation using next-i18next in Next.js

My current code in _app.ts

export default appWithTranslation(MyApp);

export const getStaticProps = async () => {
  const res = await api.get('/translation');
  const name = res.data.name as string;

  return {
    props: await serverSideTranslations(name, [name], {
      i18n: {
        defaultLocale: name,
        locales: [name],
      },
      lng: name,
      fallbackLng: 'en',
      interpolation: {
        escapeValue: false,
      },
      resources: {
        [res.data.name]: {
          translation: res.data.config,
        },
      },
    }),
  };
};

I'm getting an api response with a translation json in it. The current one is not applying translations to page

edited Jun 24 '22 at 00:20

asked Jun 23 '22 at 22:29

Swapnil Soni

2

maybe this helps: https://github.com/i18next/i18next-http-backend/tree/master/example/next – adrai Jun 24 '22 at 04:56
Hello @Swapnil, did you end up using `i18next-http-backend` or how have you handle the translation content from API? – Tommy Leong Jul 26 '23 at 16:08
@TommyLeong yes I've been using the public folder for that – Swapnil Soni Jul 26 '23 at 18:19
@SwapnilSoni when you say you've been using public folder, meaning your translation content is always part of the build. You're not reading it from API, am I correct? – Tommy Leong Jul 27 '23 at 03:21
@TommyLeong Correct – Swapnil Soni Jul 27 '23 at 05:08

next-i18next: Fetch data from HTTP api call and apply to resource

0 Answers0