setting paths using getStaticPaths?

Question

So suppose I have these 3 paths for routing in the form of an array:

const routes = ["route1", "route2", "route3"];

I would be doing this to set the paths:

export async function getStaticPaths() {

  const routes = ["route1", "route2", "route3"];

  const paths = routes.map((route) => ({ params: { id: route } }));

  return {
    paths,
    fallback: false, 
  };
}

What I could not understand what is happening inside the map function. Kindly someone explain please?

Answer 1

map() is a standard Javascript function.

This converts the array ["route1", "route2", "route3"] to an array of objects:

[{params: {'id': 'route1'}}, {params: {'id': 'route2'}}, params: {{'id': 'route3'}}]

This is the standard formatting documented by NextJS here