Next.js中「Text content did not match」警告问题求助

你遇到的「Warning: Text content did not match」是Next.js SSR/SSG场景下的典型问题：服务端和客户端执行日期格式化时，因默认locale不一致或时区差异，导致渲染出的文本内容不匹配，最终触发hydration（客户端与服务端DOM同步）警告。你的思路（格式化日期后存入projects对象）完全可行，下面是具体修复方案：

方案1：统一服务端与客户端的格式化规则 #

直接指定明确的locale和时区，避免依赖环境默认值，确保服务端和客户端格式化结果完全一致：

import { useState, useEffect } from 'react';

export default function ProjectList(props) {
  const [projects, setProjects] = useState(props.projects.data);
  
  // 明确指定locale和时区，消除环境差异
  function formatStartDate(startDate) {
    return Intl.DateTimeFormat('zh-CN', { // 替换为你需要的locale，比如'en-US'
      month: 'short',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'Asia/Shanghai', // 统一时区，避免服务端/客户端时区不同
    }).format(new Date(startDate));
  }

  useEffect(() => {
    setProjects(props.projects.data);
  }, [props]);

  return (
    projects.length > 0 && (
      <>
        {projects.map((project) => (
          <div key={project.id}>
            <h2>{project.attributes.project_name}</h2>
            <p>{formatStartDate(project.attributes.start_date)}</p>
          </div>
        ))}
      </>
    )
  );
}

方案2：在客户端完成日期格式化（贴合你的思路） #

利用useEffect仅在客户端执行的特性，先渲染原始日期，客户端hydrate后再替换为格式化后的内容，避免服务端与客户端渲染结果冲突：

import { useState, useEffect } from 'react';

export default function ProjectList(props) {
  // 初始化state，预留格式化日期字段
  const [projects, setProjects] = useState(
    props.projects.data.map(project => ({
      ...project,
      formattedStartDate: null
    }))
  );

  useEffect(() => {
    // 仅在客户端执行日期格式化
    const formattedProjects = props.projects.data.map(project => ({
      ...project,
      formattedStartDate: Intl.DateTimeFormat('default', {
        month: 'short',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      }).format(new Date(project.attributes.start_date))
    }));
    setProjects(formattedProjects);
  }, [props]);

  return (
    projects.length > 0 && (
      <>
        {projects.map((project) => (
          <div key={project.id}>
            <h2>{project.attributes.project_name}</h2>
            {/* 先显示原始日期，客户端完成格式化后自动替换 */}
            <p>{project.formattedStartDate || project.attributes.start_date}</p>
          </div>
        ))}
      </>
    )
  );
}

额外优化提示 #

• 如果项目使用SSG（静态生成），可以在getStaticProps中提前完成日期格式化，直接传递格式化后的数据给组件，从根源避免hydration警告。
• 避免在渲染函数中直接调用格式化函数（当前代码的写法），既浪费性能，也容易引发不匹配问题。

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