Next.js项目突发Hydration Error问题求助

开发Next.js页面时突然触发Hydration Error，错误截图如下：

目前其他功能均正常，我怀疑问题和Navbar组件有关，因此附上Navbar组件及关联的about-us页面代码。

关于组件导入方式说明：我用import { Navbar, Footer } from "../components"而非直接导入单个组件文件，是因为通过components/index.ts统一导出所有组件，这样只需引用组件文件夹即可。

components/Navbar.tsx #

import { Flex, Image, Heading, Link, Icon, Menu, MenuButton, Avatar, MenuList, MenuItem, MenuGroup, MenuDivider, chakra, Hide, useBreakpointValue, useColorModeValue, LightMode } from "@chakra-ui/react";
import { RiHome4Line, RiHome4Fill, RiFileList2Line, RiFileList2Fill, RiUserHeartLine, RiUserHeartFill } from "react-icons/ri";
import { useRouter } from "next/router";

import "@fontsource/montserrat/800.css";
import "@fontsource/rubik/400.css"

const Navbar = () => {
  const router = useRouter()
  return (
    <Flex pos="sticky" top="0" left="0" h="9vh" w="100%" alignItems="center" justifyContent={"space-between"} bgColor="header.800" opacity={"0.85"}  px="3" py="2" boxShadow={"lg"}>
      {/* Logo */}
      <Flex flexDir="row" alignItems={"center"} w="33%">
        <Image src="favicon.ico" draggable="false" boxSize='35px' objectFit='cover' mr="2" />
        <Hide below="md">
          <Heading color="white"><chakra.span color="brand.400">F</chakra.span>lintch</Heading>
        </Hide>
      </Flex>
      {/* Buttons */}
      <Flex h={useBreakpointValue({ base: "80%", md: "75%" })} w={useBreakpointValue({ base: "80%", sm: "70%", md: "50%", lg: "35%" })} flexDir="row" justifyContent={"space-around"} alignItems={"center"} bgColor="header.700" rounded="4xl" pt="2">
        <Link href='/'>
          <Icon color="white" as={router.pathname === "/" ? RiHome4Fill : RiHome4Line} w="160%" h="100%" focusable="false" />
        </Link>
        <Link href="/explore">
          <Icon color="white" as={router.pathname === "/explore" ? RiFileList2Fill : RiFileList2Line} w="160%" h="100%" focusable="false" />
        </Link>
        <Link href="/feed">
          <Icon color="white" as={router.pathname === "/feed" ? RiUserHeartFill : RiUserHeartLine} w="160%" h="100%" focusable="false" />
        </Link>
      </Flex>
      {/* User Avatar */}
      <Flex w="33%" justifyContent={"flex-end"}>
        <Menu isLazy>
          <MenuButton>
            <Avatar size="md" src='koala.png' />
          </MenuButton>
          <MenuList>
            <MenuGroup title="Profile" fontFamily={"Montserrat"}>
              <MenuItem><Link href="/profile">View Profile</Link></MenuItem>
              <MenuItem><Link href="/settings">Settings</Link></MenuItem>
            </MenuGroup>
            <MenuDivider />
            <MenuGroup title="Streaming" fontFamily={"Montserrat"}>
              <MenuItem><Link href="/stream">Start streaming</Link></MenuItem>
              <MenuItem><Link href="/profile">Flintch Ads</Link></MenuItem>
            </MenuGroup>
            {/* Add menu group with options only visible to Mods++ */}
            <MenuDivider />
            <MenuItem color="red.400"><Link href="/log-out">Log out</Link></MenuItem>
          </MenuList>
        </Menu>
      </Flex>
    </Flex>
  )
}

export default Navbar;

pages/about-us.tsx #

import { Box, Heading, Flex, Icon, Text, VStack, chakra, UnorderedList, ListItem } from "@chakra-ui/react";
import { RiFile2Line, RiMoneyDollarBoxLine, RiLightbulbLine, RiHandCoinLine, RiAwardLine } from 'react-icons/ri';

import { Footer, Navbar } from '../components';

import "@fontsource/montserrat/800.css";
import "@fontsource/montserrat/600.css";
import "@fontsource/montserrat/500.css";

export default function About() {
    return (
        <Flex flexDir="column" justifyContent={"flex-start"} alignItems={"center"} w="100vw" h="100vh">
            <Navbar />
            <Heading mt="4">About us!</Heading>
            <VStack spacing="30" w="90%">
                <Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
                    <Flex flexDir={"row"} justify={"flex-start"} align={"center"}>
                        <Icon as={RiFile2Line} w="12" h="12" color="brand.400" mr="2" />
                        <Heading fontSize={"3xl"} fontWeight={"semibold"}>What is Flintch?</Heading>
                    </Flex>
                    <Text mt="3">
                        Flintch is a <chakra.span color="brand.300">live-streaming platform</chakra.span> for gamers.
                        <chakra.br />
                        Flintch is an open company with <chakra.span color="brand.300">unambiguous rules</chakra.span> and terms of service, putting the <chakra.span color="brand.300">consumer first</chakra.span> and not the money.</Text>
                </Box>
                <Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
                    <Flex flexDir={"row"} justify={"flex-start"} align={"center"}>
                        <Icon as={RiLightbulbLine} w="12" h="12" color="brand.400" mr="2" />
                        <Heading fontSize={"3xl"} fontWeight={"semibold"}>Why was Flintch created?</Heading>
                    </Flex>
                    <Text mt="3">
                    We made Flintch.tv to give streamers an <chakra.span color="brand.300">option to make money</chakra.span> and to have an actual human support team, not just stupid robots or biased moderators.
                    </Text>
                </Box>
                <Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
                    <Flex flexDir={"row"} justify={"flex-start"} align={"center"}>
                        <Icon as={RiAwardLine} w="12" h="12" color="brand.400" mr="2" />
                        <Heading fontSize={"3xl"} fontWeight={"semibold"}>What are badges?</Heading>
                    </Flex>
                    <Text mt="3">
                        The Flintch custom ad supplier would be called <chakra.span color="brand.300">Flintch Ads</chakra.span>.
                        <chakra.br />
                        This will make it possible for businesses and potentially even streamers to advertise their own goods or websites.
                    </Text>
                </Box>
                {/* Profit section */}
                <Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
                    <Flex flexDir={"row"} justify={"flex-start"} align={"center"}>
                        <Icon as={RiMoneyDollarBoxLine} w="12" h="12" color="brand.400" mr="2" />
                        <Heading fontSize={"3xl"} fontWeight={"semibold"}>How can your company make money?</Heading>
                    </Flex>
                    <Text mt="3">
                        The Flintch custom ad supplier would be called <chakra.span color="brand.300">Flintch Ads</chakra.span>.
                        <chakra.br />
                        This will make it possible for businesses and potentially even streamers to advertise their own goods or websites.
                    </Text>
                </Box>
                <Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
                    <Flex flexDir={"row"} justify={"flex-start"} align={"center"}>
                        <Icon as={RiHandCoinLine} w="12" h="12" color="brand.400" mr="2" />
                        <Heading fontSize={"3xl"} fontWeight={"semibold"}>What do paysplits look like?</Heading>
                    </Flex>
                    <Text mt="3">
                        A small percentage of donations will also be recieved by us, however not every donation amount equals the same split.
                        <chakra.br />
                        <chakra.br />
                        Examples:
                        <UnorderedList>
                        <ListItem>If a donation is below $1, we take 35%.</ListItem>
                        <ListItem>Someone donates $1 {'->'} 25% of this go to us.</ListItem>
                        <ListItem>Someone donates $5 {'->'} 15% of this go to us.</ListItem>
                        <ListItem>Someone donates $10 {'->'} 10% of this go to us.</ListItem>
                        <ListItem>Someone donates $15 {'->'} 8% of this go to us.</ListItem>
                        <ListItem>If a donation is above $30, we take 2%.</ListItem>
                        </UnorderedList>
                    </Text>
                </Box>
            </VStack>
            <Footer />
        </Flex>
    )
}

奇怪的是，当我把about-us页面中除Navbar和Footer之外的所有内容移除后，页面就不再抛出这个错误了，求帮忙排查问题原因。

内容的提问来源于stack exchange，提问作者Magma