Page with a Navbar with Next.js and React. Error: Hydration failed because the initial UI does not match what was rendered on the server

Question

I am making a website using Next.js and React. I've made this navbar but every time I use it it returns this error 3 times: Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

And this one once: Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

I am unsure why this is happening. Also, I'm using Tailwind, but I highly doubt this matters.

import { MdSportsRugby } from "react-icons/md";
import { CiMusicNote1 } from "react-icons/ci";
import { IoMdSchool } from "react-icons/io";
import { IoIosCreate } from "react-icons/io";
import { MdAccountCircle } from "react-icons/md";
import { FaPaintBrush } from "react-icons/fa";
import { FaHome } from "react-icons/fa";

import { useContext } from "react";
import { UserContext } from "@/lib/context";

const SideBar = ({ house }) => {
  const { user, username } = useContext(UserContext);

  return (
    <>
      {!user && (
        <div
          className="fixed top-0 left-0 h-screen w-16 m-0 
          flex flex-col bg-gray-900 text-white shadow z-0 items-center"
        >
          <SideBarIcon
            icon={<FaHome size="28" />}
            text="Home"
            link="../"
            house={house}
          />

          <LineBreak />

          <SideBarIcon
            icon={<MdSportsRugby size="28" />}
            text="Sports"
            house={house}
          />
          <SideBarIcon
            icon={<CiMusicNote1 size="28" />}
            text="Music"
            house={house}
          />
          <SideBarIcon
            icon={<IoMdSchool size="28" />}
            text="Academia"
            house={house}
          />
          <SideBarIcon
            icon={<FaPaintBrush size="28" />}
            text="Art"
            house={house}
          />
        </div>
      )}

      {user && (
        <div
          className="fixed top-0 left-0 h-screen w-16 m-0 
            flex flex-col bg-gray-900 text-white shadow z-0 items-center"
        >
          <SideBarIcon
            icon={<FaHome size="28" />}
            text="Home"
            link="../"
            house={house}
          />

          <LineBreak />

          <SideBarIcon
            icon={<MdSportsRugby size="28" />}
            text="Sports"
            house={house}
          />
          <SideBarIcon
            icon={<CiMusicNote1 size="28" />}
            text="Music"
            house={house}
          />
          <SideBarIcon
            icon={<IoMdSchool size="28" />}
            text="Academia"
            house={house}
          />
          <SideBarIcon
            icon={<FaPaintBrush size="28" />}
            text="Art"
            house={house}
          />

          <LineBreak />

          <SideBarIcon
            icon={<IoIosCreate size="28" />}
            text="Create"
            house={house}
          />

          <SideBarIcon
            icon={<MdAccountCircle size="28" />}
            text="Account"
            house={house}
            link={`/${username}`}
          />
        </div>
      )}
    </>
  );
};

const SideBarIcon = ({ icon, text, link, house }) => (
  <a href={link}>
    <div className={house}>
      {icon}

      <span className="sidebar-tooltip group-hover:scale-100">{text}</span>
    </div>
  </a>
);

const LineBreak = () => {
  return (
    <div className="bg-stone-300 h-[0.1px] w-12 opacity-30 mt-3 mb-3"></div>
  );
};

export default SideBar;

This is my user context Code

import { createContext } from "react";
export const UserContext = createContext({ user: null, username: null });

I've tried googling it online and found a similar stack overflow page however the things mentioned in it I don't think apply to my situation.

I tried to remove the div from the anchor, however this didn't fix anything.

I believe the UserContext doesn't make a difference as I use it on other pages and it works fine.

This error only occurs if a user is logged in so when the second selection statement occurs.

I don't have this navbar on every page so I cannot put it in the _app page.

Answer 1

Problem :

I've made this navbar but every time I use it it returns this error 3 times: Error: Hydration failed because the initial UI does not match what was rendered on the server.

Possible Cause :

• You haven't made userContext as Client Side component.

Possible Solution :

• Add 'use client' at top of userContextfile

Like this :

'use client'
import { createContext } from "react";
export const UserContext = createContext({ user: null, username: null });

Further if this doesn't solves your issue then, also add 'use client' at top of SideBar file.

Please Read :

• createContext in a Server Component : https://nextjs.org/docs/messages/context-in-server-component
• Server and Client Composition Patterns : https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components

If you have any doubts, then please leave a comment (I will update answer if necessary)