What's the point of getStaticPaths in next.js (in my working example)?

JavaScript
1

I’m new at next.js, I don’t understand the logic behind getStaticPaths.

I’m creating an e-commerce website and I’m working on categories/[slug].js, I have the following code:

export default function Home({ products, slug }) {
  ...
}
export async function getStaticPaths() {
  return {
    paths: [{ params: { slug: "1" } }],
    fallback: true,
  };
}
export async function getStaticProps(context) {
  const products_res = await fetch(
    `${API_URL}/categories/${context.params.slug}`
  );
  const products = await products_res.json();
  return {
    props: { products, slug: context.params.slug },
  };
}

According to the documents Then Next.js will statically generate categories/1. My question is what’s the point? I have a bad habit that I read the documentation as the last resort. I saw the solution in many tutorials but I couldn’t wrap my head around it.

Say I have 100 categories. Would/should I hardcode 100 slugs in there? If not, what’s the point in specifying one.

(Maybe no one has 100 categories but definitely a lot of products)

EDIT: Is this only if I want to generate a static site, otherwise I’d develop this as if it was a react app (using context or redux)?

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.