我在使用NEXT.JS时遇到了“水合失败，因为初始UI与服务器上呈现的不匹配”的问题。

Question

刚接触 NEXT.js。只有当我使用 <Link> 包装 motion.div 时，才会出现“由于初始 UI 不匹配服务器端渲染内容，导致hydration失败”的错误提示。我实在想不明白原因在哪了。一切都很正常，直到我添加了<Link>。

以下是我的代码：

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>
    )
}

任何关于Hydration错误的见解或帮助将不胜感激。谢谢！

- toadlyfe

Answer 1

我遇到了同样的问题，并找到了一种“贫民窟”式的解决方法。 我删除了链接标签，只使用SocialIcon标签并将url参数替换为网络参数。这会更改图标。您也可以通过将联系组件的id设置为“email”来修复它。

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

- SALY