Growthus
Nextjs
404 Page

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 the not-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 the not-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 the not-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.