Error 404 with dynamic routing in production using the new Router App in NextJS

Question

I'm facing an issue with my Next.js project. It works perfectly in my local environment if dont use next preview, but when I deploy the app to production using Vercel or Railway or I use npx next build and npx serve@latest out, I encounter a 404 error when i try to enter in [dynamic] routes.

Error Structure of the routing app

For example the categoryId page.tsx is like this.

export default function CreateIndex({ params }: { params: { categoryId: string } }) {

  const [data, setData] = useState(papers);

  useEffect(() => {
    const filteredPapers = papers.filter((paper: Paper) => paper.category === params.categoryId);
    setData(filteredPapers);
  }, [params.categoryId]);
 

  return (
    <main className="flex flex-col items-center justify-between p-2 md:p-24 font-mono">
      <div className="flex flex-col w-full max-w-5xl items-center justify-between text-sm lg:flex">
        <section className='grid grid-cols-1 md:grid-cols-3 gap-4'>

          
            {data.map((paper: Paper, index:number) => {
              return (
                <PaperItem key={index} paper={paper}/>
              )
            })}
             

        </section>
      </div>
    </main>
  )
}

I believe this is a problem with Next.js, but I can't find the documentation. The issue might stem from the URL structure.

Thanks I'm new in react and nextjs!

I have tried to add:

trailingSlash in the project

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    output: 'export',
    images: {
      unoptimized: true
    },
    trailingSlash: true,
    // Optional: Add a trailing slash to all paths `/about` -> `/about/`
    // trailingSlash: true,
    // Optional: Change the output directory `out` -> `dist`
    // distDir: 'dist',
  }
   
  module.exports = nextConfig