My Next.JS-Redux app compiles 2 page at once

Question

I got these compiles on terminal after redirecting with window.location.href

wait  - compiling /login/verify (client and server)...
wait  - compiling /login (client and server)...

It should be goes to /login/verify, but back to /login instead because of it.

Here is my code on redirect:

componentWillReceiveProps(nextProps) {
  if(nextProps.authCode == '0')
  {
    // redirect to homepage
    setTimeout(() => {
      window.location.href = '/'
    }, 2000)
  } else if(nextProps.authCode == '20') {
    setTimeout(() => {
      window.location.href = '/register/verify'
    }, 2000)
  } else if(nextProps.authCode == '30')
  {
    setTimeout(() => {
      window.location.href = '/login/verify'
    }, 2000)
  } else {
    this.setState({
      alertLoading: false,
      alertFailed: true,
      alertMsg: nextProps.authInfo
    })
  }
}

Answer 1

Try to use useEffect or componentDidMount for redirection.

you can use router from next/router with the methods router.replace('/login/verify') for redirection as well.

I recommend checking this out https://nextjs.org/docs/api-reference/next/router#usage for more redirection examples