The following is my folder structure in next js

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

Both pages have getStaticProps which make a fetch api to pass props to the page; Also /[program_id].js has a getStaticPaths which provides 3 paths,

Question:

When i load https://www.domain/programs it renders. /programs/index.js, from there i click <Link href="/programs/P01"> it renders /programs/[program_id].js page;

But from there when i click <Link href="/programs">, it fires getStaticProps of /programs/index.js but client side it call render function of /programs/[program_id].js where router.query.program_id is undefined

Not sure why this is happening? i was expecting it to call the render for /programs/index.js

/programs/index.js

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

/programs/[program_id].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,
    },
  };