Skip to main content
Version: Next

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:

PropTypeDescription
subTitlestringThe error message to display below the 404 image

Functionality​

The BlogsError component provides the following functionality:

  1. Displays a 404 SVG image.
  2. Shows a customizable error message (subTitle) below the image.
  3. 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:

  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 BlogsError 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 blog index 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 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.

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.