部署Next.js到Vercel时如何避免时区偏移并固定显示CEST时间

问题根源 #

你之前的代码依赖运行环境的时区偏移量（getTimezoneOffset()），而Vercel服务器默认使用UTC时区，导致服务端渲染时计算出的时间与预期不符；同时客户端与服务器时区可能不一致，还会引发渲染结果不匹配的问题。手动计算时区偏移还会忽略夏令时（CEST/CET自动切换）的逻辑，进一步导致错误。

正确实现方式 #

方案一：使用原生Intl.DateTimeFormat（无依赖，推荐） #

直接通过原生API指定目标时区（Europe/Berlin，该时区会自动处理CEST/CET的夏令时切换），确保服务端与客户端渲染结果完全一致。

// 后端返回的GMT时间字符串
const gmtDateStr = "Fri, 07 May 2021 17:00:00 GMT";
// 解析为时间戳（Date对象本质是UTC时间戳，与环境时区无关）
const date = new Date(gmtDateStr);

// 按柏林时区格式化时间
const formattedCESTDate = new Intl.DateTimeFormat('de-DE', {
  timeZone: 'Europe/Berlin',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
}).format(date);

// 输出示例："Freitag, 7. Mai 2021 18:00"

方案二：使用date-fns-tz（适合复杂日期操作） #

如果需要更多日期处理逻辑，可借助date-fns-tz库来简化时区转换：

1. 安装依赖

npm install date-fns date-fns-tz

2. 代码实现

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

const gmtDateStr = "Fri, 07 May 2021 17:00:00 GMT";
const date = new Date(gmtDateStr);

// 按柏林时区格式化指定格式的时间
const formattedDate = formatInTimeZone(date, 'Europe/Berlin', 'yyyy-MM-dd HH:mm:ss');
// 输出示例："2021-05-07 18:00:00"

关键注意事项 #

• 永远不要依赖运行环境的时区，必须明确指定目标时区（如Europe/Berlin），避免服务端/客户端时区差异导致的显示不一致。
• 原生Intl.DateTimeFormat已在现代浏览器和Node.js（Vercel服务器环境支持）中广泛兼容，无需额外引入库即可满足基础格式化需求。
• 手动计算时区偏移的方式容易忽略夏令时切换逻辑，不推荐使用。

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