Translating dynamic pages with Nexti18-next

Question

In my codebase, dynamic SSG pages (static pages that do not require backend data) are not translated in production, it returns the variable_value in t(variable_value) where const { t } = useTranslation();. Oddly, it works in development and I can see the content translated. Why is that the case?

For example:

Here is my code:

package.json:

"i18next": "^22.5.1",
"next": "latest
"next-i18next": "^13.3.0",

pages/services/[type].tsx

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
export default function Index(props: any) {
  const router = useRouter();
  return (
    <>
      <Head>
  
      </Head>
       <MyComponent/>
    </>
  );
}

//To utilzie SSG we need to use getStathicPaths and getStaticProps


export async function getStaticProps(context) {
  // extract the locale identifier from the URL
  const { locale } = context;

  return {
    props: {
      // pass the translation props to the page component
      ...(await serverSideTranslations(locale)),
    },
  };
}

//https://stackoverflow.com/questions/66963434/how-to-add-next-i18next-translation-on-a-dynamically-routed-page-in-a-nextjs-app
export const getStaticPaths = async () => {
  return {
    paths: [
      { params: { type: "type" }, locale: "en" },
      { params: { type: "type" }, locale: "id" },
    ],
    fallback: true,
  };
};

Here are the resources I've used to create getStaticPaths and getStaticProps

https://phrase.com/blog/posts/nextjs-i18n/

How to add next-i18next translation on a dynamically routed page in a nextjs application?

Translating dynamic pages with Nexti18-next

0 Answers0