I've created an app with Next.js and I'm using getStaticPaths
and getStaticProps
in order to create dynamic post page.
When I'm in development, I can create a new post and the page to see it is created as well, but when I do that in production (with Vercel), the page cannot be found (404 error) until I build the app again.
What can I do to have the created page right after the creation in production like I have in development without building the app again?
Here's my code:
/[postID].jsx
const Post = ({ post }) => {
return (
<Section>
<SinglePost post={post} />
</Section>
);
};
export async function getStaticPaths() {
let paths = [];
try {
const uri = `${URL}/api/posts/`;
const res = await fetch(uri);
const posts = await res.json();
paths = posts.map((post) => ({
params: { postId: post._id },
}));
} catch (err) {
console.log(`Error fetching ressources: `, err);
}
return { paths, fallback: false };
}
export const getStaticProps = async ({ params }) => {
const uri = `${URL}/api/posts/${params.postId}`;
const res = await fetch(uri);
const post = await res.json();
return { props: { post } };
};
export default Post;