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

Question

I have a dynamically routed page in Nextjs (v10.1.3) /my-translation/[id], I'd like to use next-i18next (v8.1.3) package to translate this page.

I tried using 2 folder structure in Nextjs, they both give the same error that I can not grasp.

pages/translated-page/[id]/index.tsx
pages/translated-page/[id].tsx

However, if I change dynamic routing to static, the translation works.

Example for working folder structure:

pages/translated-page/id.tsx

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

const TranslatedPage = () => {
  const { t } = useTranslation("my-translation");
  const router = useRouter();
  const { id } = router.query;

  return (
      <div>
         {t("existing-translation-key-from-my-translation-json")}
      </div>
  );
};

export const getStaticProps = async ({ locale }) => ({
  props: {
    fallback: true,
    paths: ["/translated-page/id", { params: { id: "" } }],
    ...(await serverSideTranslations(locale, ["my-translation"])),
  },
});

export default TranslatedPage;

I get the error below for the dynamic route, I could not grasp from the provided link what I did wrong.

Server Error Error: getStaticPaths is required for dynamic SSG pages and is missing for '/translated-page/[id]'. Read more: https://nextjs.org/docs/messages/invalid-getstaticpaths-value This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack renderToHTML file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/render.js (21:2118) file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (112:126) __wrapper file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/lib/coalesced-function.js (1:341) file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/lib/coalesced-function.js (1:377) DevServer.renderToHTMLWithComponents file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (137:120) runMicrotasks processTicksAndRejections internal/process/task_queues.js (93:5) async DevServer.renderToHTML file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (138:923) async DevServer.renderToHTML file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/server/next-dev-server.js (35:578) async DevServer.render file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (75:236) async Object.fn file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (59:580) async Router.execute file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/router.js (25:67) async DevServer.run file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (69:1042) async DevServer.handleRequest file:///C:/projects/my-project.io/web-apps/my-project/node_modules/next/dist/next-server/server/next-server.js (34:504)

I got it working by adding getStaticPaths function

  export const getStaticProps = async ({ locale }) => ({
    props: {
      ...(await serverSideTranslations(locale, ["my-translation"])),
    },
  });
    
  export const getStaticPaths = async () => {
    return {
      paths: ["/my-translation/id"],
      fallback: true,
    };
  };

For pages with dynamic routes you need to use `getStaticProps` and `getStaticPaths`. I'd recommend you have a read through [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) documentation. — juliomalves, Apr 06 '21 at 17:31
Hi, any progress on this issue? My translations also worked the same way. However I am facing a build error right now. Here is my thread https://stackoverflow.com/questions/67624322/getstaticpaths-build-error-no-such-file-or-directory — Ehsan Nissar, May 21 '21 at 04:32
I don't know if fully understand the issue but to build on @juliomalves, getStaticPaths works with i18n if you pass the locales and adjust the paths accordingly. See [this topic](https://nextjs.org/docs/advanced-features/i18n-routing#dynamic-getstaticprops-pages) — GGrassiant, Jun 05 '21 at 16:02

score 6 · Answer 1 · edited Mar 18 '23 at 03:19

I was able to solve this by adding the locale to the getStaticPaths function.

Considering your id is your file parameter ( [id].js ) what worked form me would look like this:

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

const TranslatedPage = () => {
  const { t } = useTranslation("my-translation");
  const router = useRouter();
  const { id } = router.query;

  return (
      <div>
         {t("existing-translation-key-from-my-translation-json")}
      </div>
  );
};

export const getStaticPaths = async () => {
    return {
      paths: [
      { params: { type: "id" }, locale: "es" },
      { params: { type: "id" }, locale: "en" },
      ]
      fallback: true,
    };
  };

export async function getStaticProps(context) {
  return {
    props: {
      params: context.params,
      ...(await serverSideTranslations(context.locale, ["my-translation"])),
    },
  }
}

After that, you don't need to have two folders, just keep pages/translated-page/[id].tsx (considering you'll only have dynamic routes).

In case you have a lot of routes or languages, consider running a small function to simply add {locale:lang} to all your paths.

Only problem now is that the pages wont get revalidated when a new page has to be generated. Anyone knows how to fix this? — Charlie Østergaard, Jun 15 '22 at 20:43

score 0 · Answer 2 · answered Jun 28 '22 at 17:23

You need to add locale keyword to each path in getStaticPaths.

export async function getStaticPaths({ locales }) {
  const categories = [{id:"id1"},{id:"1d2"}];
  const paths = categories.flatMap((category) => {
    return locales.map((locale) => {
      return {
        params: {
          type: category.id,
        },
        locale: locale,
      };
    });
  });
  return {
    paths: paths,
    fallback: true,
  };
}

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

2 Answers2

Linked