我正在做一个网站使用Next.js和上述错误显示的每一次。
不知道我的代码有什么问题。

next-dev.js?3515:20 
        
       Warning: Expected server HTML to contain a matching <a> in <div>.

显示的另一个错误是由于某些挂起边界导致root切换到客户端渲染：

import React from 'react';
import Link from 'next/Link';
import { urlFor } from "../lib/client";

const HeroBanner = ({heroBanner}) => {
  return (
    <div className='hero-banner-container'>
<div>
    <p className='beats-solo'>{heroBanner.smallText}</p>
    <h3>{heroBanner.midText}</h3>
    <h1>{heroBanner.discount}</h1>
    <img src={urlFor(heroBanner.image)} alt ="headphones"
    className="hero-banner-image"/>
    <div>
        <Link href ={ `/product/${heroBanner.product}`}>
            <button type='button'>{heroBanner.buttonText}</button>
        </Link>
        <div className='desc'>
            <h5>Description</h5>
            <p>{heroBanner.desc}</p>
        </div>
    </div>
</div>
    </div>
  )
}

export default HeroBanner

Unhandled Runtime Error Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
网站运行良好，但每次我重新加载浏览器时都会弹出此错误。

import React from 'react'
import { client } from "../lib/client";
import { Product, FooterBanner , HeroBanner } from '../components'

const Home = ({products,bannerData}) => (
    <div>
    <HeroBanner  heroBanner = {bannerData.length && bannerData[0]}/>
   
    <div className='products-heading'>
      <h2>Best Selling Products</h2>
      <p>Speakers of many variations</p>
    </div>

    <div className='products-container'>
      {products?.map(
        (product)=>product.name)}
        </div>
      <FooterBanner/>   
    </div> 
);

export const getServerSideProps = async () => {
  const query = '*[_type == "product"]';
  const products = await client.fetch(query);
  const bannerQuery = '*[_type == "banner"]';
  const bannerData = await client.fetch(bannerQuery);

  return {
    props: {products, bannerData}
  }
}

export default Home

型
下面是我的client.js代码：

import sanityClient from  '@sanity/client';
import imageUrlBuilder from "@sanity/image-url";

export const client  = sanityClient({
    projectId: '1elz6lsg',
    dataset: 'production',
    apiVersion : '2022-03-10',
    useCdn : 'true',
    token: process.env.NEXT_PUBLIC_SANITY_TOKEN,
});
const builder = imageUrlBuilder(client);
export const urlFor = (source)=>builder.image(source);