fix: remove hydration errors

components/AlgoliaSearch.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 export const INDEX_NAME = 'asyncapi';
@@ -283,6 +283,7 @@ export default function AlgoliaSearch({ children }: { children: React.ReactNode
  */
 export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISearchButtonProps) {
   const { onOpen, onInput } = useContext(SearchContext);
+  const [Children, setChildren] = useState<string | React.ReactNode>('');
   const searchButtonRef = useRef<HTMLButtonElement>(null);
   const actionKey = getActionKey();
 
@@ -308,6 +309,12 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISe
     };
   }, [onInput, searchButtonRef]);
 
+  useEffect(() => {
+    if (typeof children === 'function') {
+      setChildren(children({ actionKey }));
+    }
+  }, []);
+
   return (
     <button
       type='button'
@@ -318,7 +325,7 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISe
       {...props}
       data-testid='Search-Button'
     >
-      {typeof children === 'function' ? children({ actionKey }) : children}
+      {Children}
     </button>
   );
 }

components/Avatar.tsx

@@ -32,9 +32,16 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) {
   );
 
   return link ? (
-    <a href={link} data-testid='Avatars-link'>
+    <span
+      onClick={(e) => {
+        e.preventDefault();
+
+        window.open(link, '_blank');
+      }}
+      data-testid='Avatars-link'
+    >
       {avatar}
-    </a>
+    </span>
   ) : (
     <React.Fragment>{avatar}</React.Fragment>
   );

components/Loader.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import AsyncAPIColorIcon from './icons/AsyncAPIColorIcon';
+
 interface LoaderProps {
   // eslint-disable-next-line prettier/prettier
 
@@ -25,7 +27,7 @@ interface LoaderProps {
  */
 export default function Loader({
   loaderText = '',
-  loaderIcon = null,
+  loaderIcon = <AsyncAPIColorIcon alt='Loading...' />,
   className = '',
   dark = false,
   pulsating = false

components/dashboard/table/Row.tsx

@@ -14,47 +14,52 @@ export default function Row({ item }: RowProps) {
   return (
     <li>
       <div className=' rounded-md border border-gray-200 bg-white p-4'>
-        <a target='_blank' rel='noreferrer' href={`https://github.com/${item.resourcePath}`}>
-          <div className='flex justify-between'>
-            <div className='flex flex-col gap-2'>
-              <div className='flex items-center gap-1 underline'>
-                <img
-                  alt='issue or pull-request icon'
-                  className='size-4'
-                  src={item.isPR ? '/img/illustrations/icons/pull-request.svg' : '/img/illustrations/icons/issue.svg'}
-                  data-testid='Row-img-issue'
-                />
-                <a
-                  target='_blank'
-                  rel='noreferrer'
-                  className='text-sm font-light lowercase text-gray-900'
-                  href={`https://github.com/${item.repo}`}
-                  data-testid='Row-github-redirect'
-                >
-                  {item.repo}
-                </a>
-              </div>
-
+        <div className='flex justify-between'>
+          <div className='flex flex-col gap-2'>
+            <div className='flex items-center gap-1 underline'>
+              <img
+                alt='issue or pull-request icon'
+                className='size-4'
+                src={item.isPR ? '/img/illustrations/icons/pull-request.svg' : '/img/illustrations/icons/issue.svg'}
+                data-testid='Row-img-issue'
+              />
+              <a
+                target='_blank'
+                rel='noreferrer'
+                className='text-sm font-light lowercase text-gray-900'
+                href={`https://github.com/${item.repo}`}
+                data-testid='Row-github-redirect'
+              >
+                {item.repo}
+              </a>
+            </div>
+            <a target='_blank' rel='noreferrer' href={`https://github.com/${item.resourcePath}`}>
               <span
                 className='two-liner w-full text-base font-medium leading-5 text-gray-900'
                 data-testid='Row-spanText'
               >
                 {item.title}
               </span>
-
-              {item.labels && item?.labels?.length > 0 && (
-                <div className='flex flex-wrap items-center gap-1'>
-                  {item.labels.map((label) => (
-                    <span key={label.name} className={'rounded-full bg-secondary-300 px-2 text-sm leading-5'}>
-                      {label.name}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-            <img alt='arrow icon' src='/img/illustrations/icons/arrow.svg' />
+            </a>
+            {item.labels && item?.labels?.length > 0 && (
+              <div className='flex flex-wrap items-center gap-1'>
+                {item.labels.map((label) => (
+                  <span key={label.name} className={'rounded-full bg-secondary-300 px-2 text-sm leading-5'}>
+                    {label.name}
+                  </span>
+                ))}
+              </div>
+            )}
           </div>
-        </a>
+          <a
+            target='_blank'
+            rel='noreferrer'
+            className='my-auto w-fit'
+            href={`https://github.com/${item.resourcePath}`}
+          >
+            <img alt='arrow icon' src='/img/illustrations/icons/arrow.svg' />
+          </a>
+        </div>
       </div>
     </li>
   );

components/navigation/BlogPostItem.tsx

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import Link from 'next/link';
 import type { Ref } from 'react';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import TextTruncate from 'react-text-truncate';
 
 import { BlogPostType } from '@/types/components/navigation/BlogPostType';
@@ -77,47 +77,45 @@ export default forwardRef(function BlogPostItem(
                     {post.type}
                   </span>
                 </Paragraph>
-                <Link href={post.slug}>
-                  <span className='block'>
-                    <Heading level={HeadingLevel.h5} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
-                      {post.title}
-                    </Heading>
-                    <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-3'>
-                      <TextTruncate element='span' line={4} text={post.excerpt} />
-                    </Paragraph>
-                  </span>
-                </Link>
+                <span className='block'>
+                  <Heading level={HeadingLevel.h5} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
+                    {post.title}
+                  </Heading>
+                  <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-3'>
+                    <TextTruncate element='span' line={4} text={post.excerpt} />
+                  </Paragraph>
+                </span>
               </div>
               <div className='mt-6 flex items-center'>
                 <div className='relative shrink-0'>
                   <AuthorAvatars authors={post.authors} />
                 </div>
                 <div className='ml-3'>
                   <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.xsSemibold} textColor='text-gray-900'>
-                    <span className='hover:underline'>
+                    <span>
                       {post.authors
                         .map((author, index) =>
                           author.link ? (
-                            <a
+                            <span
                               key={index}
                               data-alt={author.name}
-                              href={author.link}
                               onClick={(e) => {
-                                e.stopPropagation();
+                                e.preventDefault();
+
+                                // Handle the click event, e.g., navigate to author.link
+                                window.open(author.link, '_blank');
                               }}
-                              target='_blank'
-                              rel='noreferrer'
                             >
                               {author.name}
-                            </a>
+                            </span>
                           ) : (
                             author.name
                           )
                         )
-                        .reduce((prev, curr) => (
-                          <>
+                        .reduce((prev, curr, index) => (
+                          <React.Fragment key={`author-${index}`}>
                             {prev} & {curr}
-                          </>
+                          </React.Fragment>
                         ))}
                     </span>
                   </Heading>

components/newsroom/FeaturedBlogPost.tsx

@@ -87,18 +87,9 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
                       {post.authors
                         .map((author, index) =>
                           author.link ? (
-                            <a
-                              key={index}
-                              data-alt={author.name}
-                              href={author.link}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                              }}
-                              target='_blank'
-                              rel='noreferrer'
-                            >
+                            <span key={index} data-alt={author.name} rel='noreferrer'>
                               {author.name}
-                            </a>
+                            </span>
                           ) : (
                             author.name
                           )

components/tools/ToolsCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import type { ToolData, VisibleDataListType } from '@/types/components/tools/ToolDataType';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
@@ -92,9 +92,9 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
                   }, 500)
                 }
               >
-                <div ref={descriptionRef} className={`line-clamp-3 ${isTruncated && 'after:content-["..."]'}`}>
+                <span ref={descriptionRef} className={`line-clamp-3 ${isTruncated && 'after:content-["..."]'}`}>
                   {toolData.description}
-                </div>
+                </span>
               </span>
             </Paragraph>
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

pages/blog/index.tsx

@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router';
-import { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import Empty from '@/components/illustrations/Empty';
 import GenericLayout from '@/components/layout/GenericLayout';
+import Loader from '@/components/Loader';
 import BlogPostItem from '@/components/navigation/BlogPostItem';
 import Filter from '@/components/navigation/Filter';
 import Heading from '@/components/typography/Heading';
@@ -33,6 +34,7 @@ export default function BlogIndexPage() {
         })
       : []
   );
+  const [isClient, setIsClient] = useState(false);
 
   const onFilter = (data: IBlogPost[]) => setPosts(data);
   const toFilter = [
@@ -57,6 +59,10 @@ export default function BlogIndexPage() {
   const description = 'Find the latest and greatest stories from our community';
   const image = '/img/social/blog.webp';
 
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   return (
     <GenericLayout title='Blog' description={description} image={image} wide>
       <div className='relative px-4 pb-20 pt-8 sm:px-6 lg:px-8 lg:pb-28 lg:pt-12' id='main-content'>
@@ -108,16 +114,24 @@ export default function BlogIndexPage() {
             )}
           </div>
           <div>
-            {Object.keys(posts).length === 0 ? (
+            {Object.keys(posts).length === 0 && (
               <div className='mt-16 flex flex-col items-center justify-center'>
                 <Empty />
                 <p className='mx-auto mt-3 max-w-2xl text-xl leading-7 text-gray-500'>No post matches your filter</p>
               </div>
-            ) : (
+            )}
+            {Object.keys(posts).length > 0 && isClient && (
               <ul className='mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3'>
-                {router.isReady && posts.map((post, index) => <BlogPostItem key={index} post={post} />)}
+                {posts.map((post, index) => (
+                  <BlogPostItem key={index} post={post} />
+                ))}
               </ul>
             )}
+            {Object.keys(posts).length > 0 && !isClient && (
+              <div className='h-screen w-full'>
+                <Loader loaderText='Loading Blogs' className='mx-auto my-60' pulsating />
+              </div>
+            )}
           </div>
         </div>
       </div>

pages/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon';
 import Loader from '@/components/Loader';