La siguiente es mi estructura de carpetas en el siguiente js

 /pages |_/index.js |_/programs |_/[program_id].js |_/index.js

Ambas páginas tienen getStaticProps que hacen una API de búsqueda para pasar props a la página; También /[program_id].js tiene getStaticPaths que proporciona 3 rutas,

Pregunta:

Cuando cargo https://www.domain/programs , se procesa. /programs/index.js , desde allí hago clic en <Link href="/programs/P01"> muestra la página /programs/[program_id].js ;

Pero a partir de ahí, cuando hago clic en <Link href="/programs"> , getStaticProps de /programs/index.js pero en el lado del cliente llama a la función de representación de /programs/[program_id].js donde router.query.program_id no está undefined

¿No estoy seguro de por qué ocurre esto? esperaba que llamara al render para /programs/index.js

/programas/index.js

 export async function getStaticProps() { const programs = await fetchProgramsList(); //Fetch API return { props: { programs: programs.data, }, }; }

/programas/[id_programa].js

 export async function getStaticPaths() { return { paths: [ { params: { program_id: "P01" } }, { params: { program_id: "P02" } }, { params: { program_id: "P03" } }, ], fallback: false, }; } export async function getStaticProps({ params }) { const programData = await fetchProgramDetails(params.program_id); //Fetch API return { props: { programData: programData.data, }, };