Translating dynamic pages with Nexti18-next is not working on production only #2177

mattfranciswork0 · 2023-06-15T23:23:38Z

mattfranciswork0
Jun 15, 2023

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/

https://stackoverflow.com/questions/66963434/how-to-add-next-i18next-translation-on-a-dynamically-routed-page-in-a-nextjs-app

Answered by adrai

Jun 16, 2023

Follow this: https://locize.com/blog/next-i18n-static/
And compare your code with: https://github.com/i18next/next-i18next/tree/master/examples/ssg

If it still does not work, please provide a minimal reproducible example github repository.

View full answer

adrai · 2023-06-16T04:13:17Z

adrai
Jun 16, 2023
Maintainer

Follow this: https://locize.com/blog/next-i18n-static/
And compare your code with: https://github.com/i18next/next-i18next/tree/master/examples/ssg

If it still does not work, please provide a minimal reproducible example github repository.

1 reply

mattfranciswork0 Jun 16, 2023
Author

Thank you so much!!

I recently ended up solving it providing the valid url name for "type" as well !

I have this:

{ params: { type: "type" }, locale: "en" },
 { params: { type: "type" }, locale: "id" }

I changed it to:

{ params: { type: "myCustomUrl" }, locale: "en" },
{ params: { type: "myCustomUrl" }, locale: "id" },

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translating dynamic pages with Nexti18-next is not working on production only #2177

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Translating dynamic pages with Nexti18-next is not working on production only #2177

mattfranciswork0 Jun 15, 2023

Replies: 1 comment · 1 reply

adrai Jun 16, 2023 Maintainer

mattfranciswork0 Jun 16, 2023 Author

mattfranciswork0
Jun 15, 2023

Replies: 1 comment 1 reply

adrai
Jun 16, 2023
Maintainer

mattfranciswork0 Jun 16, 2023
Author