Estoy tratando de configurar una página dinámica en Next.js con getStaticPaths(). Lo tengo en un 90%, pero no puedo hacer que la función getStaticProps() haga referencia a la consulta de URL para que cargue la información adecuada.

mi código es:

 //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, }; }

Estoy recibiendo el 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.

Si reemplazo la variable 'consulta' en la función getStaticProps() con la identificación real del video que estoy tratando de cargar, todo sale bien y la página se carga. Pero entonces esto no es dinámico y no está usando la consulta de URL para que coincida con el video adecuado como yo quiero.

Aquí está el código de trabajo, no dinámico con una identificación escrita manualmente para forzar una coincidencia.

 //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, }; }

¿Cómo puedo asegurarme de que la variable 'video' está accediendo a la consulta de URL? Debería agarrarlo con context.params, pero eso no funciona, ¿qué estoy haciendo mal?