Error Hydration failed because the initial UI does not match what was rendered on the server | Next.js | Page 1

zenith gust Dec 25, 2022, 1:45 PM

#

Hello guys im getting an error again and again when i add the next link in my button. Maybe i use the wrong structure of ui but can anyone help how can i solve it .

My Code:

#

When i add the link it will give me the ui hyderation failed error

oblique rose Dec 25, 2022, 2:05 PM

#

it because you have multiple childs inside Link component wrap them with div should solve problem

tulip loom Dec 25, 2022, 2:23 PM

#

oblique rose it because you have multiple childs inside Link component wrap them with div sho...

Im facing same problem can it be caused if i have a Image components inside Link?

oblique rose Dec 25, 2022, 2:26 PM

#

after next13 you should wrap after using Link because Link is a conponent and it should have only one child can you share your code here? @tulip loom

tulip loom Dec 25, 2022, 2:26 PM

#

                <Link href="/" className="cursor-pointer flex">
                    <Image
                        width={120}
                        height={72}
                        src="/logo.png"
                        alt="Apex Manga - Logo"/>
                </Link>

#

It only has one child

oblique rose Dec 25, 2022, 2:27 PM

#

you dont need cursor pointer here other things look normal to me

tulip loom Dec 25, 2022, 2:27 PM

#

I will try removing cursor pointer

oblique rose Dec 25, 2022, 2:27 PM

#

you are using next13 right

tulip loom Dec 25, 2022, 2:28 PM

#

Yea

#Error Hydration failed because the initial UI does not match what was rendered on the server