title: How to add next-i18next translation on a dynamically routed page in a nextjs application?
body: <p>I have a dynamically routed page in Nextjs (v10.1.3) <strong>/my-translation/[id]</strong>, I'd like to use next-i18next (v8.1.3) package to translate this page.</p>
  <p>I tried using 2 folder structure in Nextjs, they both give the same error that I can not grasp.</p>
  <ul>
  <li>pages/translated-page/[id]/index.tsx</li>
  <li>pages/translated-page/[id].tsx</li>
  </ul>
  <p>However, if I change dynamic routing to static, the translation works.</p>
  <p>Example for working folder structure:</p>
  <ul>
  <li>pages/translated-page/id.tsx</li>
  </ul>
  <pre><code>import { serverSideTranslations } from &quot;next-i18next/serverSideTranslations&quot;;
  import { useRouter } from &quot;next/router&quot;;
  import { useTranslation } from &quot;next-i18next&quot;;
  
  const TranslatedPage = () =&gt; {
    const { t } = useTranslation(&quot;my-translation&quot;);
    const router = useRouter();
    const { id } = router.query;
  
    return (
        &lt;div&gt;
           {t(&quot;existing-translation-key-from-my-translation-json&quot;)}
        &lt;/div&gt;
    );
  };
  
  export const getStaticProps = async ({ locale }) =&gt; ({
    props: {
      fallback: true,
      paths: [&quot;/translated-page/id&quot;, { params: { id: &quot;&quot; } }],
      ...(await serverSideTranslations(locale, [&quot;my-translation&quot;])),
    },
  });
  
  export default TranslatedPage;
  </code></pre>
  <p>I get the error below for the dynamic route, I could not grasp from the provided link what I did wrong.</p>
  <blockquote>
  <p>Server Error Error: getStaticPaths is required for dynamic SSG pages
  and is missing for '/translated-page/[id]'. Read more:
  <a href="https://nextjs.org/docs/messages/invalid-getstaticpaths-value" rel="noreferrer">https://nextjs.org/docs/messages/invalid-getstaticpaths-value</a> 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)</p>
  </blockquote>
  <p>I got it working by adding <strong>getStaticPaths</strong> function</p>
  <pre><code>  export const getStaticProps = async ({ locale }) =&gt; ({
      props: {
        ...(await serverSideTranslations(locale, [&quot;my-translation&quot;])),
      },
    });
      
    export const getStaticPaths = async () =&gt; {
      return {
        paths: [&quot;/my-translation/id&quot;],
        fallback: true,
      };
    };
  </code></pre>