next.jsnext.js13nextjs-dynamic-routing

NextJS 13 : Dynamic routing is not working in production


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 ;


Solution

  • 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