getStaticProps and getStaticPaths go together

getStaticPaths runs on build in order to prebuild every static content available, it's necesary to implement in dynamic routes (when using something like [slug].tsx).

getStaticProps is available afterwards to get the file contents (or whatever needed) and will get details from it's correspondings paths entry as parameter.

For example, this is the only way I have to gather all my thoughts:

export async function getStaticPaths() {
  const thoughts = getAllThoughts();
  return {
    paths: thoughts.map((thought) => {
      return {
        params: {
          slug: thought.slug,
        },
      };
    }),
    fallback: false,
  };
}

interface Context {
  params: {
    slug: string;
  };
}

export async function getStaticProps({ params: { slug } }: Context) {
  const thought = getThought(slug);
  return {
    props: {
      thought: thought.data,
      content: await getThoughtHtml(thought.content),
    },
  };
}
Profile picture

Hey, I'm Edgar, software developer. I enjoy working on decentralised applications, debating ideas and going here and there. Feel free to contact me.