javascript Vercel Next JS中的服务器和客户端组件具有不同的时区

r8xiu3jd 于 2023-04-19 发布在 Java

关注(0)|答案(2)|浏览(180)

在我的Next.js 13.2.4应用程序中，我有一个名为getLocalTime(date)的助手函数，它以特定格式返回客户机的本地时间。

//Output format: 9:30PM
export function getLocalTime(date) {

  const localTime = new Date(date).toLocaleTimeString("en-US", {
    hour: "numeric",
    minute: "numeric",
    hour12: true,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
  });

  return localTime;
}

当我使用npm run dev在本地运行应用程序时，该函数返回相对于我的本地时间的正确时间。然而，当我将应用程序部署到Vercel时，我注意到服务器组件使用的是UTC时区，而客户端组件使用的是用户的实际时区。
所以我试着像这样硬编码时区。

//Output format: 9:30PM
export function getLocalTime(date) {
  const BucharestTimezone = "Europe/Bucharest";

  const localTime = new Date(date).toLocaleTimeString("en-US", {
    hour: "numeric",
    minute: "numeric",
    hour12: true,
    timezone: BucharestTimezone,
  });

  return localTime;
}

但问题还是一样。
我的问题是：如何确保Next.js中的服务器组件使用客户端机器的时区，而不是UTC？

JavaScript

来源：https://stackoverflow.com/questions/76014188/the-server-and-client-components-in-vercel-next-js-have-different-timezones

2条答案

按热度按时间

t1qtbnec1#

默认情况下，Next.js服务器组件使用UTC时区。您可以尝试moment.js。因为moment js将始终根据客户端设备时区返回时间。

赞(0）回复(0）举报 2023-04-19

o8x7eapl2#

我设法通过使用Luxon或date-fns-tz库解决了这个问题。
最后，我选择使用date-fns-tz，因为它需要较少的代码重构。

方案一：使用date-fns-tz

import { utcToZonedTime } from "date-fns-tz";
    
export function getLocalTime(date) {
      const localTime = utcToZonedTime(
        new Date(date),
        "Europe/Bucharest"
      ).toLocaleTimeString("en-US", {
        hour: "numeric",
        minute: "numeric",
        hour12: true,
      });
    
  return localTime;  //Output format: 9:30 PM
}

在这里，我使用utcToZonedTime将客户端和服务器组件的时间转换为UTC，然后为它的第二个参数指定一个时区，我希望时间以. ex为单位：Europe/Bucharest

方案二：使用Luxon

import { DateTime } from "luxon";

export function getLocalTime(date) {
 
  const localTime =  DateTime.fromISO(date, { zone: "utc" }).setZone(
    "Europe/Bucharest"
  ).toFormat("h:mm a");

  return localTime; //Output format: 9:30 PM
}

赞(0）回复(0）举报 2023-04-19

我来回答

javascript Vercel Next JS中的服务器和客户端组件具有不同的时区

2条答案

方案一：使用date-fns-tz

方案二：使用Luxon

相关问题

热门标签

最新问答