此问题已在此处有答案：

Warning: Text content did not match. Server: "I'm out" Client: "I'm in" div（5个答案）
5天前关闭。
使用下一个13和制作一个导航菜单，显示当前的日期和时间，我得到水化错误，虽然该组件是一个客户端组件，也是使用useEffect

### /src/components/navigation/index.tsx

'use client'

import Link from 'next/link'
import React, { useEffect, useState } from 'react'

export default function Navigation() {
  // Time
  const [time, setTime] = useState(new Date().toLocaleTimeString())

  useEffect(() => {
    const locale = 'en'

    const updateFormattedTime = () => {
      const today = new Date()
      const formattedTime = today.toLocaleTimeString(locale, {
        day: 'numeric',
        month: 'numeric',
        year: 'numeric',
        hour: 'numeric',
        hour12: true,
        minute: 'numeric',
        timeZone: 'Asia/Kolkata'
      })
      setTime(formattedTime)
    }
    updateFormattedTime()

    const timer = setInterval(() => {
      updateFormattedTime()
    }, 60000)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <div className="navigation">
      <Link href="/" className="head animate">
        OUTDATED
      </Link>
      <Link href="/information" className="head animate">
        Information
      </Link>
      {time && <p className="information red">{time.replace(/\//g, ',')}</p>}
    </div>
  )
}

它基本上只是获取日期和时间，并将其推到一个状态，并将其显示在头部本身。然后把斜线换成逗号
extact错误消息

Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "5:43:50 PM" Client: "5:43:51 PM"

See more info here: https://nextjs.org/docs/messages/react-hydration-error