NextJS 13 : Dynamic routing is not working in production

Question

Here is a code snippet of how I fetch data from a local Mock Data :

export default function Blog({ params }: Props) {
const blog_id = params.blog;
const blog = blogsData.find((blog) => blog.id === blog_id);

if (!blog) {
    return (<div>Blog Bot Found</div>)
}

return (
    <div className="">
      // Code
    </div>
)}

Here's also the path to the file : src/app/blogs/[blog]/page.tsx

This works fine in the dev. But when I test it on Vercel, it returns 404 page.

P.S.: A weird behavior is that when I click on a dynamic path that is supposed to give me for example : https://host/blogs/cypress. It redirects me to https://host/blogs/cyp ;

Answer 1

In my next.config.js file I had :

/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
    /* config options here */
    reactStrictMode: true,
    output: 'export',
}
module.exports = nextConfig

Apparently, setting output: 'export' will generate a static website in the production