title: next-i18next is not working with serversideprops in dynamic pages after deploying on vercel
body: <p>I'm using <a href="https://www.npmjs.com/package/next-i18next" rel="nofollow noreferrer">next-i18next</a> module for multilingual support.</p>
  <p>I have some static pages and dynamic pages as well. both working fine on local.</p>
  <p>I deployed all static pages on vercel, all worked fine on vercel. But dynamic page is not working on vercel. it shows 404 page for that dynamic page.</p>
  <blockquote>
  <p>Below is the code of the dynamic page. (pages/test-page/[questionId].js)</p>
  </blockquote>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  import {Layout} from &quot;@components/common&quot;;
  import { useRouter } from 'next/router';
  import { useTranslation } from 'next-i18next'
  import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
  import { TestComponent } from '@components/TestComponent'
  
  const TestPage = () =&gt; 
  {
      const { t } = useTranslation('common')
      const router = useRouter()
      const {questionId} = router.query;
      const [isApiLoaded,setIsApiLoaded] = useState(false)
      
      return (
          &lt;TestComponent 
              t={t}
              isApiLoaded={isApiLoaded}
              setIsApiLoaded={setIsApiLoaded}
          /&gt;
      )
  }
  TestPage.Layout = Layout
  
  export const getServerSideProps = async ({ locale }) =&gt; ({
      props: {
          ...(await serverSideTranslations(locale, ['home', 'common']))
      }
  });
  
  export default TestPage;
  </code></pre>
  <p>How to fix this issue?</p>