Custom 404 Page in Next.js App Router

Creating a well-designed 404 page improves user experience, keeps visitors engaged and reduces frustration when they land on non-existent or broken pages.

Key Points

74% of users expect helpful error pages; poor ones increase bounce.
Custom 404s improve site navigation and retention. Bounce rates drop by 20%.
Consistent branding on 404 pages builds trust for 64% of visitors.

Co-Founder

Vandana Abrol

3 min read

With Over 14 years of Experience in the IT Field, Helping Companies Optimise there Products for more Conversions

Image showing custom 404 in app with next js router

In today’s digital world, every web app development company aims to deliver seamless user experiences. A well-designed 404 error page is one of the key elements of that effort. Whether you provide custom development, handling undefined routes gracefully ensures professionalism and improves user trust.

With Next.js App Router (introduced in v13), creating a custom 404 page is now more intuitive than ever. This tutorial will guide you through the step-by-step process of setting up a personalized 404 page using not-found.tsx in the /app directory, which is important for businesses providing mobile app development services.

Tech Requirements

Before we dive in, make sure your development environment meets the following criteria:

Node.js (version 18.18.0 or later)
Next.js (version 13 or later with App Router support)

If your app development company uses custom stacks or provides on-demand solutions, these versions are optimal for leveraging the latest Next.js features.

Steps to Create a Custom 404 Page

Step 1: Create a Next.js Project Using App Router

Start by creating a new Next.js project with the App Router setup:

                                        npx create-next-app@latest my-next-app --app

The App Router is a modern file-based routing system, ideal for developers involved in web app development services and scalable web applications.

Your folder structure will look something like this:

                                        my-next-app/
 ├── app/ ← App Router root
 │ ├── page.tsx ← Home route
 │ └── layout.tsx ← Shared layout
 ├── public/ ← Static files
 ├── styles/ ← Global styles (if Tailwind enabled)
 ├── tsconfig.json ← TypeScript config
 └── next.config.js ← Next.js config

This structure promotes modularity and is ideal for teams involved in complex on-demand development platforms.

Step 2: Create not-found.tsx in the /app Directory

In the App Router structure, not-found.tsx is a special file used to display a 404 error page when a route is not matched. This is particularly useful in dynamic applications where routes might be user-generated or content-driven.

Go to the /app directory and create the following file:

/app/not-found.tsx

Step 3: Add Your Custom 404 Component

Now, paste the following JSX code into not-found.tsx. This code is styled using Tailwind CSS and provides a user-friendly error message:

                                        import Link from "next/link";
export default function NotFound() {
return (
<main className="flex flex-col items-center justify-center h-screen">
<h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
<p className="text-gray-600 mb-8">
The page you are looking for does not exist.
</p>
<Link
href="/"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Go Home
</Link>
</main>
);
}

This component is simple, clean, and conveys the message effectively. For web application development services providers, having a consistent design like this across all error states builds credibility.

Step 4: Test the 404 Page

To ensure that your custom 404 page is working, run the local dev server:

                                        npm run dev

Or if you’re using Yarn:

                                        yarn dev

Then open your browser and visit a non-existent route such as:

http://localhost:3000/unknown-path

You should now see your custom 404 page displayed. This confirms that not-found.tsx is properly integrated and ready for production.

Why It Matters for Development Partners

Whether you're a startup offering mobile app development services or an established app development company, every user-facing detail matters. A missing route shouldn't result in a blank page or default error; it should guide users back gracefully.

Explore how a sales app can drive business growth in 2025 through automation, real-time data, and customer insights.

Key benefits of implementing a custom 404 page

Improved User Experience: Helps users recover from navigation errors
Brand Consistency: Custom messages reflect your voice and values
SEO & Retention: Keeps users engaged rather than bouncing
Professional Appeal: Clients notice the difference in polish

Especially for on-demand development platforms, where users may enter various routes, a thoughtful 404 page prevents confusion and frustration.

To summarize:

You created a Next.js project using App Router
You added not-found.tsx under /app to handle 404 errors
You implemented a clean, styled 404 component
You tested the feature successfully in development

If you're an app development company working on building robust on-demand apps, this 404 setup should be part of your core project structure.

Final Words

A custom 404 page might seem small, but it's an essential feature for any serious web app development services provider. Leveraging Next.js App Router’s built-in capabilities allows you to implement this feature quickly and efficiently.

Do you want help implementing this?