BlogsError Component
The BlogsError component is designed to provide a user-friendly error display for blog-related pages in your Next.js application. It shows a 404 image and a customizable error message.
Importing the Component
To use the BlogsError component in your Next.js application, import it as follows:
import BlogsError from '@/components/BlogsError';
Basic Usage
Here's a basic example of how to use the BlogsError component:
<BlogsError subTitle="Oops! The blog post you're looking for doesn't exist." />
Props
The BlogsError component accepts the following prop:
Prop | Type | Description |
---|---|---|
subTitle | string | The error message to display below the 404 image |
Functionality
The BlogsError component provides the following functionality:
- Displays a 404 SVG image.
- Shows a customizable error message (subTitle) below the image.
- Uses responsive design to adjust layout and sizing 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 BlogsError 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 BlogsError 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 blog index 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 BlogsError component in a Next.js page:
import BlogsError from '@/components/BlogsError';
export default function BlogNotFound() {
return (
<div className='min-h-screen bg-gray-100'>
<BlogsError subTitle="We're sorry, but the blog post you're looking for cannot be found. Please check the URL or return to our blog index." />
</div>
);
}
This example demonstrates how to use the BlogsError component to create a custom 404 error page for blog posts in a Next.js application.
Related Components
Consider using this component in conjunction with:
- A blog post listing component
- A search component for finding blog posts
- A navigation component to help users explore other blog categories
By using the BlogsError component, you can provide a consistent and user-friendly experience when users encounter missing or error states in your blog pages. Remember to customize the error message to fit your application's tone and provide helpful guidance to your users.