Next js route gives 404 when deployed but working on local host

i am trying to fetch some data using a path name. like https://test.skillology.ml/subject/current-affairs is the link and I am using /current-affairs as the id to fetch some data.

Edit : my next js pages folder structure is like this :

pages/
 test-route/
  index.jsx
  [slug].jsx

Code in index.jsx or https://test.skillology.ml/test-route

import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import Layout from '../../Components/Layout/Layout'
import { getSubjectsApi } from '../../lib/atlas/categorySubject'
const TestRouteIndex = () => {
  
  //get subjects from api
  const [subjects, setSubjects] = useState([])
  useEffect(() => {
    (async () => {
      const response = await getSubjectsApi()
      if (response) {
        setSubjects(response)
      }
    })()
  }, [])

  return (
    <>index page it will have the categories

      <div className='container'>
        <h2>category</h2>

        <div className='row'>
          {subjects.map((subject, index) => (
            <div className='col-md-4' key={index}>
              <div className='card'>
                <div className='card-body'>
                  <Link href={`/test-route/${subject.slug}`}>
                    <a>{subject.label}</a>
                  </Link>
                </div>
              </div>
            </div>

          ))}
        </div>

      </div>


    </>
  )
}

export default TestRouteIndex

Code in [slug].jsx

import React, { useEffect, useState } from 'react'
import Layout from '../../Components/Layout/Layout'
import SingleQuestion from '../../Components/Question/SingleQuestion'
import { useRouter } from 'next/router'
import { getQuestionBySubject } from '../../lib/atlas/questions'

const ValueFetchBySlug = () => {
    const router = useRouter()
    const slug = router.query.slug
    const [question, setQuestion] = useState([])
    useEffect(() => {
        if (slug !== undefined && slug !== '' && slug !== null && slug !== '[slug]') {
            (async () => {
                const question = await getQuestionBySubject(slug)
                setQuestion(question)
            })()
        }
    }, [slug])

    return (
        <>
            <h3>slug: {slug}</h3>
            <h3>data fetched from the api using slug value</h3>
            <p>{JSON.stringify(question)}</p>
            {question.map((question,index) => (
                <h3 key={index}> {question.question_id}</h3>
            ))}

        </>

    )
}

export default ValueFetchBySlug

Now , localhost:3000/test-route/polity is working fine but when deployed to cloudflare pages https://test.skillology.ml/test-route/polity , it gives 404.

Can anyone help me with this?