Next.js服务端与客户端日期渲染不匹配问题求助

问题根源在于Next.js服务端渲染时，Node.js默认使用英文locale，而React-Calendar在客户端渲染时采用法语，导致SSR输出的HTML（如"April 2023"）与客户端hydrate后的内容（如"avril 2023"）不匹配，触发文本内容不匹配警告。

你之前尝试的toLocaleDateString()无效，是因为React-Calendar内部依赖date-fns进行日期格式化，而非原生API，因此需要为其配置统一的法语locale，确保服务端和客户端渲染结果一致。

解决步骤： #

1. 安装date-fns法语locale包
   首先需要安装date-fns的法语locale支持：

   npm install date-fns/locale/fr
   # 或
   yarn add date-fns/locale/fr
   

2. 在组件中导入并配置React-Calendar的locale
   修改组件代码，导入法语locale，并传递给React-Calendar的locale属性，同时确保date-fns的格式化方法也使用该locale。

修改后的完整代码： #

import { FC, useState } from "react";
import ReactCalendar from "react-calendar";
import { add, format } from 'date-fns';
// 导入法语locale
import { fr } from 'date-fns/locale/fr';

interface indexProps {}

interface DateType {
  justDate: Date | null;
  dateTime: Date | null;
}

const index: FC<indexProps> = ({}) => {
  const [date, setDate] = useState<DateType>({
    justDate: null,
    dateTime: null,
  });

  const getTimes = () => {
    if(!date.justDate) return

    const { justDate } = date
    const beginning = add(justDate, {hours: 13})
    const end = add(justDate, {hours: 17})
    const interval = 60 // in minutes
    
    const times = []
    for (let i = beginning; i <= end; i = add(i, {minutes: interval})) {
        times.push(i)
    }
    return times
}

const times = getTimes()

  return (
    <div className="flex h-screen flex-col items-center justify-center">
      {date.justDate ? (
        <div className="flex gap-4">
            {times?.map((time, i) => (
                <div key={`time-${i}`} className='rounded-sm bg-gray-100 p-2'>
                   <button type="button" onClick={() => setDate((prev) => ({...prev, dateTime: time}))}>
                    {/* 为format函数指定法语locale */}
                    {format(time, 'kk:mm', { locale: fr })}</button> 
                </div>
            ))}
        </div>
      ) : (
        <ReactCalendar
          minDate={new Date()}
          className="REACT-CALENDAR p-2"
          view="month"
          // 传递locale给React-Calendar
          locale={fr}
          onClickDay={(date) =>
            setDate((prev) => ({ ...prev, justDate: date }))
          }
        />
      )}
    </div>
  );
};

export default index;

关键说明： #

• 通过为React-Calendar添加locale={fr}，强制服务端和客户端都使用法语渲染月份名称等文本，避免SSR与客户端内容不一致。
• 同时为format函数指定{ locale: fr }，确保时间格式化规则统一（虽kk:mm格式不受语言影响，但统一配置更严谨）。
• 移除无效的useEffect代码，它无法解决React-Calendar内部的渲染语言问题。

内容的提问来源于stack exchange，提问作者marvik