https://github.com/evavic44/nextjs-custom-404
Custom animated 404 page in NextJS
https://github.com/evavic44/nextjs-custom-404
Last synced: 3 months ago
JSON representation
Custom animated 404 page in NextJS
- Host: GitHub
- URL: https://github.com/evavic44/nextjs-custom-404
- Owner: Evavic44
- Created: 2022-07-18T11:06:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T15:17:10.000Z (over 2 years ago)
- Last Synced: 2025-06-22T11:39:40.449Z (4 months ago)
- Language: JavaScript
- Size: 83 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Customizing the 404 page
To create a custom 404 page create a `404.js` file inside the pages directory of your project. This automatically replaces the default 404 page that comes built-in. This page works the same way as a regular page in a NextJS app, so you can customize it anyhow you want.
## Example Snippet
```js
// pages/404.js
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
import styles from "../styles/Error.module.css";
import ErrorImage from "../public/error.svg";
export default function Error() {
return (
<>
Oops! Page not found
404
Opps! This page is lost in space.
Return home
>
);
}
```
## Getting Started
Follow this guide to run this app locally.
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
```cmd
git clone https://github.com/Evavic44/nextjs-custom-404.git
cd nextjs-custom-404
```
Install the package manager
```bash
npm install
```
Next, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.