title: Having trouble getting url query parameter in next.js
body: <p>I am just trying to get the value of a parameter in my url. </p>
  
  <p>I'm new to next.js and still fairly new to react in general. </p>
  
  <p>My url looks like:</p>
  
  <pre><code>localhost:3000/?code=VhXHWwRemC32dPmm3oj0mMravO6MP3
  </code></pre>
  
  <p>Right now, I just am rendering a page like:</p>
  
  <pre><code>const Index = () =&gt; {
         const router = useRouter();
         const code = router.query.code;
         console.log(code);
         return(
         &lt;div&gt;
             &lt;p&gt;code: {code}&lt;/p&gt;
             &lt;a href={Oauth.discord_login_url}login&lt;/a&gt;
             &lt;/div&gt;)
          };
  </code></pre>
  
  <p>Just so I can see if I'm getting the code correctly from the url.</p>
  
  <p>Once I log in with discord, I return to Index and the url then looks like what I showed above. I am trying to get the value of code so I can use it. What confuses me is that </p>
  
  <pre><code>&lt;p&gt;code: {code}&lt;/p&gt; 
  </code></pre>
  
  <p>successfully displays the value of "code" on the page. But </p>
  
  <pre><code>console.log(code) 
  </code></pre>
  
  <p>shows undefined. Why is it different?</p>