Next.js: How to redirect?

[popuguytheparrot]

I try in _app

render(){
if(!auth) Router.push('login')
}

and got error

Error: No router instance found.
You should only use "next/router" inside the client side of your app.

how do redirect do right?

[klujanrosas]

The wiki has an entry about this subject.

For a more _real world_ example, please see with-apollo-auth example.

From what I've seen you should post any future questions not related to actual _issues_ to Next's Spectrum Chat instead.

Cheers :tada:

[popuguytheparrot]

@klujanrosas Your example doesnt work in my case

[swve]

How redirecting can be so hard with nextjs >:(

[sergiodxa]

Check the code of this module https://github.com/matthewmueller/next-redirect/ it's actually quite simple, you should redirect in getInitialProps to avoid rendering and fetching unnecessary data.

You could also replace https://github.com/matthewmueller/next-redirect/blob/master/index.js#L16 with a Router.replace to avoid a reload.

[jgillich]

Maybe some details would be great, instead of just downvoting. Because the example works completely fine for me.

[omonk]

I believe this is a difference in getInitialProps signature for _app.js and normal pages

[seanconnollydev]

@sergiodxa @jgillich I am doing something very similar to the implementation in next-redirect but after initiating a redirect on the client (via window.location.href="" where the string is the redirect url), getInitialProps still returns and the page still tries to render briefly before the browser redirects. Do you see the same behavior? Any tips on preventing that behavior?

[lifeiscontent]

@klujanrosas how do you redirect with a dynamic route e.g. /blog/:postId?

[ccemeraldeyes]

I am not sure why this got closed when it clearly does not answer the question for so many people.

There HAS to be a way to do redirects outside getInitialProps. I am using relay and don't have the data I need to be able to determine the redirect until the component is partially loaded. At that point, I no longer have access to the router OR the window property, it seems.

[Timer]

Hey, all!

Issuing a side effect during rendering is not a standard React practice.
This can easily become problematic in many scenarios, especially if Next.js ever starts optimistically rendering hidden trees for navigation.

You should avoid redirecting client-side within getInitialProps for the same reason. While this pattern currently works in practice, the patterns listed below are more encouraged.

Redirects are a side effect, and should occur as so within your component's events:

componentDidMount() { // and/or componentDidUpdate, depending on what you're trying to do
  if (!auth) {
    Router.push('...')
  }
}

render() {
  if (!auth) {
    return null;
  }
  // ...
}

For a functional component:

function MyPage() {
  useEffect(() => {
    if (!auth) {
      Router.push('...')
    }
  })

  // ...
}

Please open a new thread on our Spectrum if you have any questions or need guidance.