Next.js中处理时区的常用方案推荐

import { format } from 'date-fns';
import { utcToZonedTime } from 'date-fns-tz';

interface TimeDisplayProps {
  utcTimestamp: string | Date;
}

export function TimeDisplay({ utcTimestamp }: TimeDisplayProps) {
  // 获取用户时区
  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  
  // 将 UTC 时间转换为用户时区时间
  const localTime = utcToZonedTime(new Date(utcTimestamp), userTimeZone);
  
  // 格式化显示
  return <time>{format(localTime, 'yyyy-MM-dd HH:mm:ss')}</time>;
}

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 将用户时区存储在全局状态或 localStorage 中
    const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    localStorage.setItem('userTimeZone', userTimeZone);
  }, []);

  return <Component {...pageProps} />;
}

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

export function formatLocalTime(utcTime: string | Date, format = 'YYYY-MM-DD HH:mm:ss') {
  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  return dayjs(utcTime).tz(userTimeZone).format(format);
}

describe('Time formatting', () => {
  it('should correctly convert UTC to different timezones', () => {
    const utcTime = '2024-03-20T10:00:00Z';
    
    // 模拟不同时区
    const mockTimeZones = ['America/New_York', 'Asia/Shanghai', 'Europe/London'];
    
    mockTimeZones.forEach(timezone => {
      // 测试每个时区的转换
      const localTime = formatLocalTime(utcTime);
      expect(localTime).toBeDefined();
    });
  });
});