nextjs dynamic pages shows 404 after project hosted in ubuntu server

I've been working on this project for quite a long time now. Some of my dynamic pages have issues with 404 error even though they are running perfectly fine in localhost. I tried using revalidate and also fallback: true and false. But it seems not working as expected.

Here is a full page code example from one of my pages:

export async function getStaticPaths() {
      const res = await fetch(domain + "api/vb1/page-menu/")
        const data = await res.json();
      
        const content = data["data"]
      
        const paths = content.map(pageName =>{
         

            return {
                params: {pageId: pageName.id.toString()
                    // id: pageName.id?.toString()
                }
            }
         
        })
        return {
          paths,
          fallback: true // true or 'blocking'
        };
      }
      
      export async function getStaticProps(context) {
        const id = context.params.pageId


        try {

        const res = await fetch(domain + 'api/vb1/page-content/' +id )
        const posts = await res.json()
        const data = posts["data"]
          if (!data) {
            return { notFound: true };
          }
          return { props: { data },revalidate: 10 };
        } catch (err) {
          return { notFound: true };
        }
      }
      
    
    
    
function SubPages({data}) {
    return (
<>
{[data]?.map(items=>{
    return         <div key={items?.id} className='mx-48 my-12 lg:mx-10 '>
    <h1 className='text-black text-4xl my-12 dark:text-white '>{items?.title_bn}</h1>
  <div className=' text-black dark:text-white' dangerouslySetInnerHTML={{ __html: items?.content_bn }}>
       
  </div>
</div>
})}
</>
    );
}

export default SubPages;

My contents are dynamic they need to change regular basis. So nextjs should able to build those static files. I'm really stucked here. I tried so many researches and attempted multiple approaches but none of them worked.

When I'm posting something from cms it's generating new routes. But after build command it giving me 404

After struggling so many days I've managed to solve this react useEffect array dependency. here is my code :

  const router = useRouter()
  const id = router.query.pageId
  const [data, setData]=useState();
  useEffect(()=>{
      async function fetchData() {
        const res = await fetch(domain + 'api/vb1/page-content/' +id )
        const {data} = await res.json();
        setData(data)
      }
      fetchData()
    },[id]);