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:
- The component uses a container with centered content and responsive padding.
- It displays a 404 SVG image.
- Below the image, it shows a customizable error message (subTitle).
- 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:
- Modify the Tailwind classes to adjust the layout, spacing, or colors.
- Replace the 404 SVG image by changing the
src
attribute of the<img>
tag. - Adjust the image dimensions by modifying the
height
andwidth
props of the<img>
tag.
Accessibility
The PageError component includes some accessibility features:
- The error image has both
alt
andtitle
attributes for screen readers and tooltips. - The error message uses semantic HTML (
<p>
tag) for proper structure.
To further improve accessibility:
- Consider adding a heading (e.g.,
<h1>
) with a clear error statement. - Ensure color contrast ratios meet WCAG standards, especially for the semi-transparent error message.
Best Practices
- Use clear and concise language in the
subTitle
prop to explain the error and provide guidance if possible. - Consider adding a link back to the homepage or a search feature to help users navigate away from the error page.
- 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.