How To Implement Client Side Redirects In Next.js
31st Oct 2022
- React
- Next.js
- Redirects
Photo by Marcel Strauß
In vanilla React, you can perform redirects by rendering the Redirect component from the react-router-dom
library.
import { Redirect } from "react-router-dom"
...
<Route exact path="/">
{loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>
But how can you implement client side redirects with the in-built routing system of Next.js?
In this article I will go through the steps to implement client side redirects in Next.js, using as example whether a user should go to the dashboard (if logged in) or to the homepage (if not logged in).
1. Access the router object with useRouter()
In Next.js, any routing logic is managed by the router
object, which can be accessed with the useRouter() hook.
import { useRouter } from 'next/router'
function App() {
const router = useRouter()
...
}
export default App
The router object exposes a series of properties and functions you can use to do anything routing-related, like changing the page (router.push()
) or getting the current pathname (router.pathname
).
2. Place the redirecting logic inside a useEffect()
While vanilla React redirects by rendering a component (<Redirect />
), Next.js can change the page only by calling a function like router.push()
.
The best place to call this function is inside a useEffect()
.
import { useEffect } from "react"
import { useRouter } from "next/router"
function App({ loggedIn }) {
const router = useRouter()
useEffect(() => {
if (loggedIn) {
router.push("/dashboard")
return
}
router.push("/)
}, [])
return "Loading..."
}
export default App
3. Manage the history stack with router.replace()
Image you have a feature composed of multiple pages with this URL structure:
/feature
(pages/feature/index.tsx
for redirecting logic to other pages)/feature/start
(pages/feature/start.tsx
)/feature/continue
(pages/feature/continue.tsx
)/feature/success
(pages/feature/end.tsx
)
What if you don’t want to save the redirecting page /feature
in the history stack?
You can use router.replace().
This will change the page without saving it in the history stack, avoiding to re-perform the redirecting logic if the user clicks the back arrow from their browser.
import { useEffect } from "react"
import { useRouter } from "next/router"
function App({ loggedIn }) {
const router = useRouter()
useEffect(() => {
if (loggedIn) {
router.replace("/dashboard")
return
}
router.replace("/)
}, [])
return "Loading..."
}
export default App
Next.js is a fully-fledged framework you can use to create web applications that are modern and performant.
Spend time reading through the documentation to make the most of it.