Reports

I am using Next.js v15.1.0 with the App Router and encountered a hydration error.

The issue was resolved by wrapping the MUI AppBar component with a Box component, which fixed the error.

I’m sharing this here in case it might help someone facing a similar problem.

<html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <Box>
           <AppBar position="static" sx={{ backgroundColor: "#0d0402" }}>
              <Container
                sx={{
                  maxWidth: "1200px",
                  textAlign: "center",
                }}
              >
                <Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
                ...
                </Toolbar>
              </Container>
            </AppBar>
        </Box>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>

79291242