title: Next js Dynamic Router misfiring
body: <p>The following is my folder structure in next js</p>
  <pre><code>/pages
  |_/index.js
  |_/programs
     |_/[program_id].js
     |_/index.js
  </code></pre>
  <p>Both pages have <code>getStaticProps</code> which make a fetch api to pass <code>props</code> to the page;
  Also <code>/[program_id].js</code> has a <code>getStaticPaths</code> which provides 3 paths,</p>
  <h5>Question:</h5>
  <p>When i load <code>https://www.domain/programs</code> it renders. <code>/programs/index.js</code>, from there i click <code>&lt;Link href=&quot;/programs/P01&quot;&gt;</code> it renders <code>/programs/[program_id].js</code> page;</p>
  <p><strong>But from there when i click <code>&lt;Link href=&quot;/programs&quot;&gt;</code>, it fires <code>getStaticProps</code> of <code>/programs/index.js</code> but client side it call render function of <code>/programs/[program_id].js</code>  where <code>router.query.program_id</code> is <code>undefined</code></strong></p>
  <p>Not sure why this is happening? i was expecting it to call the render for <code>/programs/index.js</code></p>
  <h6>/programs/index.js</h6>
  <pre><code>export async function getStaticProps() {
    const programs = await fetchProgramsList(); //Fetch API
    return {
      props: {
        programs: programs.data,
      },
    };
  }
  </code></pre>
  <h6>/programs/[program_id].js</h6>
  <pre><code>export async function getStaticPaths() {
    return {
      paths: [
        { params: { program_id: &quot;P01&quot; } },
        { params: { program_id: &quot;P02&quot; } },
        { params: { program_id: &quot;P03&quot; } },
      ],
      fallback: false,
    };
  }
  export async function getStaticProps({ params }) {
    const programData = await fetchProgramDetails(params.program_id); //Fetch API
    return {
      props: {
        programData: programData.data,
      },
    };
  </code></pre>