1

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;
juliomalves
  • 42,130
  • 20
  • 150
  • 146
SanB
  • 39
  • 1
  • 7
  • Does this answer your question: [Best approach for an app with +150k static pages?](https://stackoverflow.com/a/66037031/1870780)? You can use `fallback: true` or `fallback: blocking` in `getStaticPaths`. – juliomalves Aug 16 '21 at 18:19
  • 1
    It didn't work with "fallback: true" but it's working with "fallback: 'blocking'" ! Thank you for your help ! – SanB Aug 16 '21 at 19:01

0 Answers0