RealStatic
Nextjs
404 Page

404 Page

To personalize the 404 page on your website, you can modify the app/not-found.jsx file. Follow the steps below to customize different elements of the page:

Error Image

To customize the error image shown on the 404 page, locate the following code and update it with your desired image:

<Image
    src="/images/error.svg"
    alt="error"
    width="465"
    height="481"
/>
  • Update the src attribute to specify the path of your desired image. Make sure to provide the correct path relative to your project's directory structure.
  • Adjust the height and width attributes to set the desired dimensions for the error image.

Text

Modify the text displayed on the 404 page by updating the content inside the <h3> tag:

<h4>Something went wrong!</h4>
 

Replace the text "Something is wrong!" with your desired message.

Button

To customize the button on the 404 page, modify the following code:

<a href="/" className="btn btn-small btn-outline ">
    <span>Homepage</span>
    <ArrowRight size={16} />
</a>
 
  • You can update the text "Go to Home" to your desired text.

Remember to save the not-found.jsx file after making the desired changes. The 404 page on your website will now reflect the personalized elements according to your customizations.

Make sure to replace the example paths and text with your actual image paths, logo, and desired content. Adjust the dimensions, classes, and styles as needed to achieve the desired visual appearance.