ReactJS/nextJS: Don't get access to cookie/properties after redirecting

In my nextJS application the user can do a login (login page), which creates a cookie with a token and redirects to a route (main page), which uses the main component.

In the Main component I'm using getInitialProps to get the cookie token. But this is only working after refreshing the page. So right now I'm logging in and getting redirected. If I click on the button, there is no token. After refreshing the page, I do get a token.

How can I avoid this? I think I'm doing something wrong on server side...

Login

export class Login extends Component {
  render () {
    return (
      <Form id='login' onSubmit={this._onSubmit.bind(this)}>
        // Input fields
      </Form>
    )
  }

  _onSubmit = (event) => {
    event.preventDefault()
    const { username, password } = this.state

    // Sends mutation request to graphQL server
    this.props.signinUserMutation({
      variables: { username, password }
    }).then(response => {
      // Returns token
      const token = response.data.token
      if (token) {
        Cookies.set('auth-token', token)
        this.props.client.resetStore().then(() => {
          redirect({}, '/main')
        })
      }
    })
  }
}

Main

class Main extends Component {
  static async getInitialProps (context, apolloClient) {
    const { req } = context
    const initProps = {}

    if (req && req.headers) {
      const cookies = req.headers.cookie
      if (typeof cookies === 'string') {
        const cookiesJSON = jsHttpCookie.parse(cookies)
        initProps.token = cookiesJSON['auth-token']
      }
    }

    return initProps
  }

  clickIt = () => {
    console.log(this.props.token)
  }

  render () {
    return (<Button onClick={this.clickIt.bind(this)})
  }
}