Having trouble getting url query parameter in next.js

Question

I am just trying to get the value of a parameter in my url.

I'm new to next.js and still fairly new to react in general.

My url looks like:

localhost:3000/?code=VhXHWwRemC32dPmm3oj0mMravO6MP3

Right now, I just am rendering a page like:

const Index = () => {
       const router = useRouter();
       const code = router.query.code;
       console.log(code);
       return(
       <div>
           <p>code: {code}</p>
           <a href={Oauth.discord_login_url}login</a>
           </div>)
        };

Just so I can see if I'm getting the code correctly from the url.

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>code: {code}</p>

successfully displays the value of "code" on the page. But

console.log(code)

shows undefined. Why is it different?

Does it still returns undefined if you try console.log("code: "+ code);? — oemera
– oemera, Commented Dec 1, 2019 at 22:10
And console.log(router.query)? Also, show a screen shot how the view looks. Thats actually strange. — oemera
– oemera, Commented Dec 2, 2019 at 3:38

oemera · Accepted Answer · 2021-04-23 12:12:22Z

8

Try to add getInitialProps:

const Index = () => {
  const router = useRouter();
  const code = router.query.code;
  console.log(code); 

  Index.getInitialProps = async () => {
    return {};
  };

 return ( 
   <div>
     <p>code: {code}</p> 
     <a href={Oauth.discord_login_url}>login</a>
   </div>
  ) 

};

edited Apr 23, 2021 at 12:12

answered Dec 2, 2019 at 3:47

oemera

3,4933 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LightningLarryL Over a year ago

Oh dang. That seems to have fixed my issue. Thank you!

Collectives™ on Stack Overflow

Having trouble getting url query parameter in next.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related