Error Page

In this section of the documentation, we will demonstrate how to customize the SaaSBold boilerplate's error pages (404).

The error page is essential for informing users when they have reached a page that doesn't exist and guiding them back to the website's functional areas.

import NotFound from "@/components/404";


The SaaSBold error page includes a message stating that the page was not found and provides helpful links to navigate back to the website's main sections.

  • Error Message: A clear message indicating that the page was not found.

  • Helpful Links: Navigation links to guide users back to the main sections of the website.

Steps to Customize

Locate the Error Page Component File: Open the NotFound component file located in components/404/index.tsx.

Update the Error Message: Modify the error message to reflect the tone and style of your brand.

Customize Navigation Links: Update the links to guide users back to your website's homepage or other important sections.

Review and Save: After customizing the error page, ensure the message is clear, and the navigation links are functional. Save the file and verify the changes.

Tips for Effective Error Pages

  • Clear Messaging: Ensure the error message is straightforward to understand.

  • Helpful Navigation: Provide clear navigation options to help users quickly return to functional areas of the website.

  • Consistent Branding: Maintain consistent branding, including colors and fonts, to provide a seamless user experience.

By following these steps and tips, you can create an effective error page that helps users navigate back to useful parts of the website, improving overall user experience.

Last updated