404 Page
To customize the 404 page, you can make changes to the app/not-found.jsx
file. Here's how you can customize different elements of the page:
title
: To customize the title, locate the following code in thenot-found.jsx
file and modify it according to your preference:
<h1 className="text-primary">404</h1>
You can change the text inside the <h1>
tag to customize the title.
sub-title
: To customize the sub-title, find the following code in thenot-found.jsx
file and edit it:
<h2 className="mb-6">Page not found!</h2>
You can modify the text inside the <h2>
tag to customize the sub-title.
image
: To customize the image, locate the following code in thenot-found.jsx
file and make the necessary changes:
<Image
src="/images/404/error.png"
className="error-image"
alt="error-image"
width={400}
height={400}
style={imageStyle}
/>
You can update the src attribute to specify the path of your desired image. Additionally, you can modify the width
, height
, and style props to adjust the image's dimensions and styling.
After customizing the elements in the not-found.jsx
file, save the changes. When the 404 page is rendered, it will reflect your customizations.