fix: remove hydration errors

components/AlgoliaSearch.tsx

@@ -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

@@ -31,11 +31,5 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) {
     />
   );
 
-  return link ? (
-    <a href={link} data-testid='Avatars-link'>
-      {avatar}
-    </a>
-  ) : (
-    <React.Fragment>{avatar}</React.Fragment>
-  );
+  return link ? <span data-testid='Avatars-link'>{avatar}</span> : <React.Fragment>{avatar}</React.Fragment>;
 }

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
                           )

utils/getStatic.ts

@@ -2,26 +2,24 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 import i18nextConfig from '../next-i18next.config';
 
-console.log(i18nextConfig.i18n.locales);
-
 /**
  * Retrieves the internationalization paths for the supported locales.
  * @returns An array of paths for each supported locale.
  */
 export const getI18nPaths = () =>
-    i18nextConfig.i18n.locales.map((lng) => ({
-        params: {
-            lang: lng
-        }
-    }));
+  i18nextConfig.i18n.locales.map((lng) => ({
+    params: {
+      lang: lng
+    }
+  }));
 
 /**
  * Retrieves the static paths for Next.js.
  * @returns An object containing the fallback value and an array of paths.
  */
 export const getStaticPaths = () => ({
-    fallback: false,
-    paths: getI18nPaths()
+  fallback: false,
+  paths: getI18nPaths()
 });
 
 /**
@@ -30,15 +28,13 @@ export const getStaticPaths = () => ({
  * @param ns - An array of namespaces to be loaded.
  * @returns An object containing the internationalization props.
  */
-export async function getI18nProps(ctx:any, ns = ['common']) {
-    const locale = ctx?.params?.lang;
-
-    console.log(locale, 'here');
-    const props = {
-        ...(await serverSideTranslations(locale, ns))
-    };
+export async function getI18nProps(ctx: any, ns = ['common']) {
+  const locale = ctx?.params?.lang;
+  const props = {
+    ...(await serverSideTranslations(locale, ns))
+  };
 
-    return props;
+  return props;
 }
 
 /**
@@ -47,11 +43,9 @@ export async function getI18nProps(ctx:any, ns = ['common']) {
  * @returns A function that retrieves the static props.
  */
 export function makeStaticProps(ns = {}) {
-    return async function getStaticProps(ctx:any) {
-        console.log(ctx, 'ctx');
-
-        return {
-            props: await getI18nProps(ctx, ns as any)
-        };
+  return async function getStaticProps(ctx: any) {
+    return {
+      props: await getI18nProps(ctx, ns as any)
     };
+  };
 }