NextJS Error: The server HTML was replaced with client content in <div>

30 views Asked by At

I am trying to make a NextJS static web, but the following error occurred:

Error: Hydration failed because the initial UI does not match what was rendered on the server
Warning: Expected server HTML to contain a matching <img> in <div>.

Here's my code:

const JiuCafe = () => {
  const thumbnail = [
    {
      id: 1,
      img: "https://image.img",
    },
  
  ];

  const detail = [
    {
      name: "name",
      img: "https://image.img",
      description:
        "description",
    },
  ];

  return (
    <div className="shadow">
      <section id="services" className="services section-bg">
        <div className="container-fluid">
          <div className="row row-sm">
            <div className="col-md-6 _boxzoom">
              <div className="zoom-thumb">
                <ul className="piclist">
                  {thumbnail.map(({ img }) => (
                    <li>
                      <img src={img} alt=""></img>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="_product-images">
                <div className="picZoomer">
                  {detail.map(({ img }) => (
                  <img className="my_img" src={img} alt=""></img>
                  ))}
                </div>
              </div>
            </div>
            <div className="col-md-6">
              <div className="_product-detail-content">
                {detail.map(({ name, description }) => (
                  <li>
                    <p className="_p-name">
                      <b>{name}</b>
                    </p>
                    <div className="_p-price-box">
                      <div className="_p-features">
                        <span> {description} </span>
                      </div>
                    </div>
                  </li>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

This is the demo I reference on CodePen: https://codepen.io/creativesunil/pen/NWGojvM

I tried to modify it on HTML and it works. I put it in my NextJS project, no error shown in Visual Studio Code but once it rendered this error occurred and the code seemed to have issue.

Thank you very much in advance.

0

There are 0 answers