How to redirect to home page instead of 404 page?

[ahmedbeheiry]

Hello,
I'm using Nextjs and when I type any wrong route it'll navigate me to 404 page ( which is amazing feature ) but, what if I don't want it to navigate to 404 instead I want to navigate to homepage whenever user types any wrong route?
Thanks.

[nezdemkovski]

Hey @ahmedbeheiry, use nextjs redirects feature (https://nextjs.org/docs/api-reference/next.config.js/redirects), perfect for your case.

[ahmedbeheiry]

Hey @yakovlevyuri
Thanks for your response.
As I know to use redirects feature, you type source (route you want to redirect from ) and destination (route you want to redirect to ) that's if I understand it well.
404 page appears to user when he types wrong route ( route you don't have a page for in your website ) and the url doesn't change.
So how can I use redirects here? I don't know what'd be the route user would type.

[nezdemkovski]

Don't have a laptop right now to test it out, but smt like this should work just fine.

async redirects() {
    return [
      {
        source: '/_error',
        destination: '/',
      },
    ];
  },

Probably you'll need to create custom error page (pages/_error.js) though.

[diegoulloao]

this doesn't work

[ghost]

I've found this to be a good solution to this!

In pages/404.js:

import { useEffect } from "react"
import { useRouter } from "next/router"

export default function Custom404() {
  const router = useRouter()

  useEffect(() => {
    router.replace("/")
  })

  return null
}

[ahmedbeheiry]

Thanks for replying. That's exactly what I did but I thought there maybe a better solution instead of going to 404 page rendering null ( white screen appears ) then navigate to home page which is kind of a weird behavior.

[davidparys]

I would recommend to also add a 301 redirect instead of pushing to the router, better for SEO 👍

[Drelli]

I would recommend to also add a 301 redirect instead of pushing to the router, better for SEO 👍

How?

[eli-front]

window.location.replace('/');

[mrhost-dev]

Seems odd there isn't a way to accomplish this using the redirects property of next.config.js

[guitheengineer]

This can also work, I'm not sure if it's the optimal solution though.
pages/404.js

export default function Custom404() {
  return null;
}

export const getStaticProps = () => {
  return {
    redirect: {
      destination: '/',
    },
  };
};

[tizmagik]

This seemed like a clean solution, but in Next 11 at build it gives this error:

Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: `redirect` can not be returned from getStaticProps during prerendering (/404)
See more info here: https://nextjs.org/docs/messages/gsp-redirect-during-prerender
    at renderToHTML (/project/node_modules/next/dist/next-server/server/render.js:29:1184)
    at async /project/node_modules/next/dist/export/worker.js:26:6
    at async Span.traceAsyncFn (/project/node_modules/next/dist/telemetry/trace/trace.js:6:584)

[jj-143]

That error applies for any pages though, not just for 404. Since you can't use getServerSideProps in 404, I think we have the only option to use router replace in useEffect.

[guitheengineer]

This seemed like a clean solution, but in Next 11 at build it gives this error:

Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: `redirect` can not be returned from getStaticProps during prerendering (/404)
See more info here: https://nextjs.org/docs/messages/gsp-redirect-during-prerender
    at renderToHTML (/project/node_modules/next/dist/next-server/server/render.js:29:1184)
    at async /project/node_modules/next/dist/export/worker.js:26:6
    at async Span.traceAsyncFn (/project/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Sad... At that moment I was working with the past versions

[chan-nguyen]

Typescript: pages/404.tsx

import { GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async () => {
  return {
    redirect: {
      destination: '/',
      permanent: true,
    },
  };
};

export default getStaticProps;

[alfongj]

This fails the prerendering step and doesn't build https://nextjs.org/docs/messages/gsp-redirect-during-prerender

[bev1]

in _app.js in getInitialProps

      if (ctx.res.statusCode === 404) {
        res.writeHead(301, { Location: '/' })
        res.end()
      }

[kitayoshi]

FYI the complete TS example:

import App, { AppContext } from 'next/app'

import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext: AppContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext)

  if (appContext.ctx.res?.statusCode === 404) {
    appContext.ctx.res.writeHead(302, { Location: '/' })
    appContext.ctx.res.end()
    return
  }

  return { ...appProps }
}

export default MyApp

[hughlv]

This does not work in SSG.

[RuslanKalyniak]

ти мене просто спас чувак, в мене 404 робило локально на сервері не працювало. Твій код спас мене

[boomshakar]

The return statement after appContext.ctx.res.end() is not necessary since we would always want the App to return return { ...appProps }

MyApp.getInitialProps = async (appContext: AppContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  if (appContext.ctx.res?.statusCode === 404) {
    appContext.ctx.res.writeHead(302, { Location: '/' });
    appContext.ctx.res.end();
  }

  return { ...appProps };
};

[icyJoseph]

Hi,

One way to do this is to combine next.config.js rewrites:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return {
      afterFiles: [{ source: "/:path*", destination: "/_404/:path*" }],
    };
  },
};

module.exports = nextConfig;

With this file:

// pages/_404/[...path].tsx
// renders nada
export const Custom404 = () => <div></div>;

export const getServerSideProps = () => {
  return { redirect: { destination: "/", permanent: false } }; 
};

export default Custom404;

We rewrite when nothing can be matched in the file system. The rewrite destination is a page that always redirects people back to /.

No getInitialProps required what so ever. If anyone tries to access /_404/ and its subpaths, they are returned back to /.

[thierryteyssier]

Use fallback instead of afterFiles in next.config.js file

[DanC5]

this works perfectly, thanks!

[philipbrito]

Won't work if output: 'export' is used (Export Custom Routes error).

[alenvlahovljak]

You can also create a page called [...rest].tsx at the root of your pages directory, which will catch all non-existing pages before 404.tsx. Add the following code to the [...rest].tsx file:

import type { NextPage } from 'next';

export const Custom404: NextPage = () => null;

export const getServerSideProps: () => Promise<any> = async () => {
  return { redirect: { destination: '/', permanent: true } };
};

export default Custom404;

And that is it :)

[philipbrito]

The following error will occur when using Static HTML Export: getServerSideProps cannot be used with "output: export"

[atco-jh]

@filipedelimabrito
That's because getServerSideProps is for SSR, and export is for SSG only. You will need to convert it to a getStaticProps like in other examples above.

[sgtkuncoro]

work for me, best solution so far. thanks

[shubhamnagota]

how to do this in app router?
I am using router groups as well.

[anjalbinayak]

You can create a 404.js file in page directory. and write the following code

` import { useEffect } from "react"
import { useRouter } from "next/router"

export default function 404Page() {
const router = useRouter();

useEffect(() => {
router.push("/")
})

return null
}`

[bibekme]

worked

[urfreespace]

worked, perfect, thanks. @anjalbinayak

[boomshakar]

This answer right here actually solves the issue which also helps the robot crawlers SEO wise for a temporary redirection 302 and returns something valuable instead of a broken page that you wouldn't need to be indexed.

in your _app.js implement the getInitialProps

import App, { AppContext } from 'next/app'

import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext: AppContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  if (appContext.ctx.res?.statusCode === 404) {
    appContext.ctx.res.writeHead(302, { Location: '/' });
    appContext.ctx.res.end();
  }

  return { ...appProps };
};

ecport default MyApp

[tomdygo]

Spent quite a while looking at alternatives to this, my preference was to use the redirects function within next.config.js to basically just reroute to home on a 404 status code.

Unfortunately, you can't access the statusCode in headers on the has array. The function only has access to request headers at this point.

Just thought I'd give people a heads-up if you ever end up down the rabbit hole.

I think re-routing client-side is a disappointing alternative.

[Dhanuvel163]

This solution should work fine. The page is Server side rendered too.

/** @type {import('next').NextConfig} */
const nextConfig = {
    async rewrites() {
        return [
          {
            source: '/:path*',
            destination: '/',
          },
        ];
    }
}

module.exports = nextConfig

[lucascampelo]

For those that not found an useful answer here, I found one that redirects all pages to / via http. Just put this on next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path(.{1,})', // this will redirect any other paths to `/`
        destination: '/',
        permanent: true
      },
      {
        source: '/404',
        destination: '/',
        permanent: true
      }
    ]
  },
};

[sreuter]

I'd rather return this as an actual 404 Not found to let crawlers know the page does not exist but still redirect for actual clients via app/not-found.tsx

"use client";

import { useEffect } from "react";

export default () => {
  useEffect(() => {
    window.location.href = "/";
  }, []);
  return <div></div>;
};

[kostiantyn-orshanskyi-dev-optima]

For me, here is a working option for server side component:

not-found page:

import {redirect} from "next/navigation"

export default function Page() {
redirect('/')

return null

}

[andriilive]

"next/navigation" same as "not-found" route is app-directory, not pages feature

[NxRoot]

Solution without build errors:

404.tsx

import Index from "./index"
export default Index

[Malith-Rukshan]

This solution should work fine. app/not-found.tsx

import {redirect} from "next/navigation";

export default function NotFoundPage(){
    redirect("/");
}

[NazimSari]

thanks bro!

[codeofandrin]

For me, it renders the layout.tsx with no children and then it redirects, which is visible on production (however not in localhost).

[codeofandrin]

For me a reliable solution which works in development localhost and production server was following (app router):

1. Routing

Use following folder structure:

app

├── (general)
│   ├── (home)
│   │   └── page.tsx
│   ├── whatever
│   │   └── page.tsx
│   └── layout.tsx
│
├── [...not-found]
│   ├── layout.tsx
│   └── page.tsx
│
├── globals.css
└── ...

• In (general) I put everything with the default layout.tsx which should apply for every existing page. Normally this would be in app/layout.tsx
• For every unexisting page I don't use a not-found.tsx file itself, I just catch every other path with [...not-found] and use it's own page.tsx and layout.tsx for it to handle the redirect.

2. page.tsx

Next.js only detects a route as a path if it has a page.tsx inside. But since we don't want to display anything, just return nothing.

export default function Placeholder() {}

3. layout.tsx

Here the actual redirect happens.

import { redirect } from "next/navigation"

export default function RootLayout() {
  redirect("/")
}

This worked for me and also doesn't affect interns like /_next/... etc.