I am trying to set up a dynamic page in Next.js with getStaticPaths(). I have it 90% of the way there, but I can't get the getStaticProps() function to reference the URL query so that it loads the proper info.

My code is:

//Get Static Paths
export async function getStaticPaths() {
  const paths = await (
    await youtube.get("search?")
  ).data.items.map((video: any) => {
    const id = video.id.videoId;
    return { params: { id } };
  });

  return {
    paths: paths.map((path: any) => path),
    fallback: false,
  };
}

//Get Static Props
export async function getStaticProps(context: any) {
  const { query = "" } = context.params.query;
  const videos = await (await youtube.get("search?")).data.items;
  const video = videos.find((vid: any) => {
    return vid.id.videoId === query;
  });
  return {
    props: {
      video,
    },
    revalidate: 10,
  };
}

I am receiving the error:

Error: Error serializing `.video` returned from `getStaticProps` in "/media/videos/[id]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

If I replace the 'query' variable in the getStaticProps() function with the actual ID of the video I am trying to load, everything goes through fine and the page loads. But then this is not dynamic, and is not using the url query to match with the proper video like I want.

Here is the working, non-dynamic code with a manually typed in ID to force a match.

//Get Static Props
export async function getStaticProps(context: any) {
  // It's important to default the slug so that it doesn't return "undefined"
  const { query = "" } = context.params;
  const videos = await (await youtube.get("search?")).data.items;
  const video = videos.find((vid: any) => {
    return vid.id.videoId === "_TACZtT1irI";
  });
  return {
    props: {
      video,
    },
    revalidate: 10,
  };
}

How can I make sure that the 'video' variable is accessing the url query? It should be grabbing it with context.params, but that is not working, what am I doing wrong?