title: Why does dynamic page shows the same data per request in Next.js?
body: <p>I have a dynamic page named <code>[className].js</code>. In it, I'm trying the fetch the data using getServerSideProps. Currently, I have only two sets of data. When I click a link, that's supposed to take me the dynamic page with the className and show the data within it. But, no matter which link I click, it always shows the data of the first one.</p>
  <p>Why is this happening? How can I get the data of the specified className?</p>
  <pre><code>export default function classPage({ classDetail }) {
    const capitalizedClassTitle =
      classDetail.title.charAt(0).toUpperCase() + classDetail.title.slice(1);
    const classTitle = capitalizedClassTitle.replace(/-/g, &quot; &quot;);
  
    return (
      &lt;div&gt;
        &lt;NavBar /&gt;
        &lt;div&gt;This is the page for {classTitle}&lt;/div&gt;
        &lt;div className=&quot;w-20 h-20&quot;&gt;
          &lt;Image
            src={classDetail.classImageURL}
            width={classDetail.imageWidth}
            height={classDetail.imageHeight}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export async function getServerSideProps({ query: { className } }) {
    const res = await fetch(
      `http://localhost:3000/api/admin/classes/${className}`
    );
    const { data } = await res.json();
  
    return { props: { classDetail: data } };
  }
  </code></pre>