I'm getting a NEXT.JS "Hydration failed because the initial UI does not match what was rendered on the server"

Question

New to NEXT.js. Only when I wrap the motion.div with a < Link > this does this "Hydration failed because the initial UI does not match what was rendered on the server" show up. For the life of me I can't figure out why. Everything seems fine until I add the < Link >.

Here is my code:

import React from 'react';
import { SocialIcon } from 'react-social-icons';
import { motion } from 'framer-motion';
import Link from 'next/link';
type Props = {}


export default function Header({ }: Props) {
    return (
        <header className='sticky top-0 p-5 flex items-start justify-between max-w-7xl mx-auto z-20 xl:items-center'>
            <motion.div
                initial={{
                    x: -500,
                    opacity: 0,
                    scale: 0.5,
                }}
                animate={{
                    x: 0,
                    opacity: 1,
                    scale: 1,
                }}
                transition={{
                    duration: 1.5,
                }}
                className='flex flex-row items-center'>
                {/* Social Icons */}
                <SocialIcon
                    url='https://github.com/Roadlyfe'
                    fgColor='gray'
                    bgColor='transparent'
                />
                <SocialIcon
                    url='https://www.instagram.com/roadlyfe/'
                    fgColor='gray'
                    bgColor='transparent'
                />
                <SocialIcon
                    url='https://www.youtube.com/channel/UCUcr2WcJaUQ8nw_T9RZrjaw'
                    fgColor='gray'
                    bgColor='transparent'
                />
            </motion.div>
            <Link href='#contact'>
                <motion.div
                    initial={{
                        x: 500,
                        opacity: 0,
                        scale: 1,
                    }}
                    animate={{
                        x: 0,
                        opacity: 1,
                        scale: 1,
                    }}
                    transition={{ duration: 1.5 }}
                    className='flex flex-row items-center text-gray-300 cursor-pointer'>
                    <SocialIcon
                        className='cursor-pointer'
                        network='email'
                        fgColor='gray'
                        bgColor='transparent'
                    />
                    <p className='uppercase hidden md:inline-flex text-sm text-gray-400'>Get In Touch</p>

                </motion.div>
            </Link>
        </header>
    )
}

Any insight or help understanding the Hydration error would be appreciated. Thanks!

score 2 · Answer 1 · answered Dec 07 '22 at 09:56

I've got the same problem and found a "ghetto" way to fix it. I got rid of the Link-Tag and just used the SocialIcon-Tag with the url parameter instead of network parameter. That changes the icon, though. You could fix that as well by giving your contact component the id='email'.

<SocialIcon
  className='cursor-pointer'
  url='#contact'
  fgColor='gray'
  bgColor='transparent'
/>

I'm getting a NEXT.JS "Hydration failed because the initial UI does not match what was rendered on the server"

1 Answers1