How to Redirect to 404 Page in NextJS When Using Dynamic Routes

Hello, hustlers! In this article, you’ll learn how to redirect to 404 page in NextJS inside getServerSideProps or getStaticProps when using dynamic routes or ISR.

If you want to follow along or test it out, I created a sample repo that you can use as a template. Just run this command:

npx create-next-app -e https://github.com/jmarioste/nextjs-redirect-to-404 next-404-redirect

Redirecting to 404 in getServerSideProps

Suppose you have the route /posts/[slug].tsx , in your getServerSideProps you can do the following redirect to 404 page:

// posts/[slug].tsx
...
export const getServerSideProps: GetServerSideProps = async (
  ctx
) => {
  const slug = ctx.params?.slug as string;
  const post = getPostBySlug(slug) ?? null;

  if (!post) {
    return {
      notFound: true, //redirects to 404 page
    };
  }

  return {
    props: {
      post,
    },
  };
};

In line #6, we get try to get a post by slug

In line #7, we check if the post exists. If it doesn’t exist, then return { notFound: true } to redirect to /404 .

The beauty of this approach is that, it will redirect to 404 page automatically without rendering the component since everything is done on the backend. You don’t have to check in client side to check if a post is null and use router.push("/404") .

If you navigate to a post that doesn’t exist and check the dev tools, it will show the correct status code but it will retain the correct path.

Redirecting to 404 in getStaticProps

In getStaticProps , you can use the same technique. Suppose you have a route /tutorials/[slug].tsx , it will be exactly the same as above. For getStaticPaths, I recommend to use fallback: "blocking" .

// tutorials/[slug].tsx
...
export const getStaticPaths: GetStaticPaths = async ()=> {
  return {
    paths: [],
    fallback: "blocking"
  }
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const slug = ctx.params?.slug as string;
  const post = getTutorialBySlug(slug) ?? null;

  if (!post) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      tutorial: post,
    },
  };
};

Why is it a Bad to Redirect from the Client-side?

Why is it a bad practice to redirect from the client side? First, it will change the path which is annoying for users. Second it returns a statusCode 200 for the actual path, which is wrong in SEO.

Let’s take a look at this example, Suppose you didn’t use notFound: true this time:

import { GetServerSideProps } from "next";
import { useRouter } from "next/router";
import React from "react";
import { getPostBySlug } from "../../data/getPostBySlug";
import { Post } from "../../data/Post";

type PostPageProps = {
  post?: Post;
};
const PostPage = (props: PostPageProps) => {
  const router = useRouter();

  if(!props.post && typeof window !== "undefined"){
    router.push("/404")
    return null;
  }
  return (
    <div>
      PostPage
      <h1>{props.post?.slug}</h1>
      <p>{props.post?.content}</p>
    </div>
  );
};

export default PostPage;

export const getServerSideProps: GetServerSideProps = async (
  ctx
) => {
  const slug = ctx.params?.slug as string;
  const post = getPostBySlug(slug) ?? null;

  // if (!post) {
  //   return {
  //     notFound: true,
  //   };
  // }

  return {
    props: {
      post,
    },
  };
};

In Lines 10-14, We check if the post is null and use the useRouter() hook to redirect to 404.

If you navigate to /posts/that-doesnt-exists and check chrome dev tools, this is what happens:

Limitations

This feature is only available from NextJS v10.0.0

Conclusion

There are many ways to redirect to 404 in NextJS. But today, we learned on how to properly redirect to 404 in NextJS by returning { notFound: true } in getServersideProps and/or getStaticProps .

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter .

Resources

1. NextJS docs for getStaticProps
2. NextJS Docs for getServerSideProps
3. Full code: https://github.com/jmarioste/nextjs-redirect-to-404

Related Posts

1. How to Parse NextJS Query Params in Typescript

Credits: Image by CUONG_ART from Pixabay