PageError Component

The PageError component is designed to provide a user-friendly 404 error page for your Next.js application. It displays a custom error image and a customizable error message.

Importing the Component

To use the PageError component in your Next.js application, import it as follows:

import PageError from '@/components/PageError';

Basic Usage

Here's a basic example of how to use the PageError component:

<PageError subTitle="Oops! The page you're looking for doesn't exist." />

Props

The PageError component accepts the following prop:

Prop	Type	Description
subTitle	string	The error message to display below the 404 image

Key Features:

1. The component uses a container with centered content and responsive padding.
2. It displays a 404 SVG image.
3. Below the image, it shows a customizable error message (subTitle).
4. The layout is responsive, adjusting spacing and text size for different screen sizes.

Styling

The component uses Tailwind CSS for styling. Key styling features include:

• Responsive container with auto margins and rounded corners
• Flexbox layout for centering content vertically and horizontally
• Responsive padding and gap between elements
• Responsive text sizing
• Maximum width constraint on the error message
• Semi-transparent primary color for the error message text

Customization

To customize the PageError component:

1. Modify the Tailwind classes to adjust the layout, spacing, or colors.
2. Replace the 404 SVG image by changing the src attribute of the <img> tag.
3. Adjust the image dimensions by modifying the height and width props of the <img> tag.

Accessibility

The PageError component includes some accessibility features:

• The error image has both alt and title attributes for screen readers and tooltips.
• The error message uses semantic HTML (<p> tag) for proper structure.

To further improve accessibility:

1. Consider adding a heading (e.g., <h1>) with a clear error statement.
2. Ensure color contrast ratios meet WCAG standards, especially for the semi-transparent error message.

Best Practices

1. Use clear and concise language in the subTitle prop to explain the error and provide guidance if possible.
2. Consider adding a link back to the homepage or a search feature to help users navigate away from the error page.
3. Ensure the 404 SVG image is optimized for web use to maintain fast loading times.

Example Usage

Here's an example of how you might use the PageError component in a Next.js page:

import PageError from '@/components/PageError';

export default function Custom404() {
  return (
    <PageError subTitle="We're sorry, but the page you're looking for cannot be found. Please check the URL or return to our homepage." />
  );
}

This example demonstrates how to use the PageError component to create a custom 404 error page in a Next.js application.

---

By using the PageError component, you can provide a consistent and user-friendly experience when users encounter missing pages in your application. Remember to customize the error message to fit your application's tone and provide helpful guidance to your users.