如何在Next.js 13中正确设置America/SaoPaulo时区？

1. 服务器端渲染（SSR/SSG/ISR）的核心问题与修复 #

Next.js 13服务器端默认使用UTC时区，这就是你看到日期偏差3小时的原因（圣保罗时区比UTC晚3小时，夏令时期间晚2小时）。提供两种修复方案：

全局设置：通过环境变量指定时区 #

在项目根目录的.env.local文件中添加：

TZ=America/SaoPaulo

这个变量会让Node.js运行时（包括Next.js服务器端）默认使用圣保罗时区，所有new Date()生成或处理的日期都会自动适配。如果部署到Vercel等平台，需在平台的环境变量面板同步配置该值。

局部处理：服务器组件中指定时区格式化 #

如果不想全局修改时区，在服务器组件里用Intl.DateTimeFormat格式化时直接指定时区：

// 服务器组件示例
export default function EventDate({ eventDate }) {
  return new Intl.DateTimeFormat('pt-BR', {
    timeZone: 'America/SaoPaulo',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  }).format(new Date(eventDate));
}

2. 客户端组件的时区适配 #

客户端默认会使用用户本地时区（你的圣保罗时区），如果仍有偏差，大概率是服务器传递的是UTC日期字符串，需正确解析并格式化：

// 客户端组件示例
export default function ClientEventDate({ utcDate }) {
  return new Intl.DateTimeFormat('pt-BR', {
    timeZone: 'America/SaoPaulo',
    // 按需添加格式选项，比如weekday: 'long'
  }).format(new Date(utcDate));
}

3. 简化date-fns的时区处理 #

你之前手动调整繁琐易出错，用date-fns-tz扩展包可直接处理时区：
先安装依赖：

npm install date-fns date-fns-tz

然后直接指定时区格式化：

import { formatInTimeZone } from 'date-fns-tz';

// 把日期格式化为圣保罗时区的指定格式
const displayDate = formatInTimeZone(new Date(), 'America/SaoPaulo', 'dd/MM/yyyy HH:mm:ss');

该方法会自动适配夏令时的偏移变化，无需手动计算。

额外提示 #

• 夏令时：圣保罗时区每年会切换夏令时，上述所有方案都会自动处理偏移变化，无需额外调整。
• 最佳实践：后端存储日期时建议使用UTC格式（比如ISO字符串），前端根据需求转换为目标时区显示，避免时区混乱。

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