next.js - next-i18next is not working with serversideprops in dynamic pages after deploying on vercel

Question

I'm using next-i18next module for multilingual support.

I have some static pages and dynamic pages as well. both working fine on local.

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.

Below is the code of the dynamic page. (pages/test-page/[questionId].js)

import { useState, useEffect } from "react";
import {Layout} from "@components/common";
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { TestComponent } from '@components/TestComponent'

const TestPage = () => 
{
    const { t } = useTranslation('common')
    const router = useRouter()
    const {questionId} = router.query;
    const [isApiLoaded,setIsApiLoaded] = useState(false)
    
    return (
        <TestComponent 
            t={t}
            isApiLoaded={isApiLoaded}
            setIsApiLoaded={setIsApiLoaded}
        />
    )
}
TestPage.Layout = Layout

export const getServerSideProps = async ({ locale }) => ({
    props: {
        ...(await serverSideTranslations(locale, ['home', 'common']))
    }
});

export default TestPage;

How to fix this issue?