The following code example came after wanting to redirect my 404 page after someone landed on it. I’ve been using an astronaut for my branding and have been loving it. I found a picture of an alien beaming the astronaut into its spaceship, so wanted to ‘beam’ the user back home. The easy way out was to use a button and have them click it, but that didn’t make sense to me. Since it’s ‘beaming’, it should happen automatically. So I did the following:

import { useRouter } from 'next/router'

const Custom404 = () => {
    const router = useRouter()
    useEffect(() => {
        const timeout = setTimeout(() => {
            router.push('/')}, 2000);

The first line of code imports next/router from Next, don’t miss that step. Then, I added a useEffect hook to set the timeout interval. I had to use that function inside the useEffect hook because it can only run client side. When I tried it without the hook, I kept getting an error because it was running on build. Silly me.

The argument in router.push is the page you want to redirect to, so change as needed. I’m redirecting home.