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 ;
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