Thiết kế website giá rẻ

Question

I got this error when building a website using nextjs 14.0.4

**Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error**

i think its comming from the root layout but I have not been able to find a way to fix it

This is the root layout

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "@/components/UI/Theme";
import Header from "@/components/Header";
import FooterSection from "@/components/Footer";
import { Suspense } from "react";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Home",
  description: "Landing Page",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <ThemeProvider theme={theme}>
        <body className={inter.className}>
          <Header />
          <main>{children}</main>
          <FooterSection />
        </body>
      </ThemeProvider>
    </html>
  );
}

**This is the header component **

import NavBar from "./NavBar";

const Header = () => {
    return (
      <header className="p-4 border-b ">
        <NavBar />
      </header>
    );
  };

export default Header

This is the Navbar component

"use client";
import Link from "next/link";
import React from "react";
import { Button } from "@mui/material";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import { Menu } from "@mui/icons-material";
import { Suspense } from "react";

const nav_items = [
  {
    label: "About Me",
    href: "/aboutMe",
  },
  {
    label: "Contact Me",
    href: "/contactMe",
  },
  {
    label: "Blog",
    href: "",
  },
  {
    label: "Tutorials",
    href: "",
  },
];

const NavBar = () => {
  return (
    <nav className="flex justify-between items-center w-full">
      <Link href="/">Nicholas</Link>

      <div className=" w-1/3 md:flex  justify-between hidden">
        {nav_items.map((item, index) => (
          <Button className="text-black" key={index} href={item.href}>
            {item.label}
          </Button>
        ))}
      </div>

      <span className="flex gap-2">
        <Button variant="contained" className="hidden md:block">
          hello world
        </Button>
        <Slider />
      </span>
    </nav>
  );
};

export default NavBar;

function Slider() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer =
    (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
      if (
        event.type === "keydown" &&
        ((event as React.KeyboardEvent).key === "Tab" ||
          (event as React.KeyboardEvent).key === "Shift")
      ) {
        return;
      }

      setOpen(inOpen);
    };

  return (
    <Box className="flex items-center md:hidden">
      <Menu onClick={toggleDrawer(true)} className="cursor-pointer w-8 h-8" />
        <Drawer
          open={open}
          anchor="right"
          onClose={toggleDrawer(false)}
          className="p-8"
        >
          <Box
            role="presentation"
            onClick={toggleDrawer(false)}
            onKeyDown={toggleDrawer(false)}
            className="flex flex-col"
          >
            <div className="flex flex-col items-center p-8">
              <span className="text-xl font-bold">Pages</span>
              {nav_items.map((item, index) => (
                <Button className="text-black" key={index} href={item.href}>
                  {item.label}
                </Button>
              ))}
            </div>
          </Box>
        </Drawer>
    </Box>
  );
}

Footer cmponent

import { Container } from "@mui/material";

const FooterSection = () => {
  const sitemap = ["home", "about me", "blog", "tutorials", "Contact me"];
  return (
    <footer className="bg-black/90  flex flex-col items-between text-white">
      <Container maxWidth={"md"}>
        {" "}
        <div className="py-16 flex gap-4 justify-between">
          <article>
            <h3 className="font-bold text-3xl capitalize">Sitemap</h3>

            <div className="flex flex-col">
              {sitemap.map((item, index) => (
                <span key={index} className="capitalize text-xl">
                  {item}
                </span>
              ))}
            </div>
          </article>

          <div>
            <h3 className="font-bold text-3xl">Lorem ipsum, dolor sit amet</h3>
            <p className="max-w-xl">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis
              fugiat ducimus non voluptatibus nisi perferendis aliquam, libero
              at veritatis! Provident? Lorem ipsum dolor, sit amet consectetur
              adipisicing elit. Nihil, itaque.
            </p>
          </div>
        </div>
      </Container>

      <div className="bg-black flex justify-center text-white">
        copyright © 2024 Nicholas Ogufere
      </div>
    </footer>
  );
};

export default FooterSection```

I need help with this.





I tried to change the stacking of the items but that did't work too

Thiết kế website giá rẻ

Danh mục

Hydration error when building nextjs application