NextJS Custom 404 Page

In this article we will be looking at how to create a custom 404 page for the NextJS app router configuration.

Context

Try visiting this page.
You'll notice that the page does not exist and you are redirected to a custom 404 page. NextJS provides a way to create a custom 404 page using the not-found.tsx file if you're using typescript or the not-found.js file if you're using javascript.

Implementation

Create a file called not-found.tsx inside the app directory.
This page is like any other page in NextJS. You can add any content or apply styling to it, and whenever a page is not found, this page will be displayed.

Right now the default page looks like this -

After adding some content and styling to our 404 page,the 404 page now looks like this -

Code for reference

  import Link from 'next/link'
  import React from 'react'
  
  export default function Page() {
    return (
      <div className='h-96 flex flex-col gap-1 items-center justify-center'>
          <p className='px-10 md:px-0 text-center fade-text font-bold'>This page does not exist</p>
          <Link href={"/"} className="text-sm underline">Go Home</Link>
      </div>
    )
  }