仅在生产中nextjs中的水合错误

os8fio9y  于 2023-05-06  发布在  其他
关注(0)|答案(1)|浏览(196)

我被困在这几个小时。我在vercel上部署我的Next-JS应用程序,我得到了很多水合错误。正如我所说,在我的本地机器上的开发模式中,我根本没有得到任何错误。
我读到错误可能是因为服务器和客户端或本地机器的时区不同而发生的,但我使用的是时间戳。
问题只发生在Messages.tsx组件中。
这是我在DB中保存时间戳的方式:方法1(当我发送消息到Facebook messanger):

const timestamp = Date.now();
    const messageData: Message = {
      id: nanoid(),
      senderId: body.teamId,
      text: body.message.text,
      timestamp,
      source: "facebook",
    };

方法2:当我收到来自Facebook messanger的消息(使用他们的时间戳):

const messageData: Message = {
            id: webhook_event.message.mid,
            senderId: sender_psid,
            text: webhook_event.message.text,
            timestamp,
            source: "facebook",
          };

这就是我如何格式化它:

const formatTimestamp = (timestamp: number) => {
    return format(timestamp, "HH:mm");
  };

我的错误照片:
x1c 0d1x感谢您的帮助!

9nvpjoqh

9nvpjoqh1#

这可能是因为不同的时区,例如。你和维塞尔
但我用的是时间戳
在这种情况下没有关系,因为无论如何都要将其格式化为日期。格式化为本地日期的相同时间戳可以显示不同的日期。
例如,您可以在呈现日期的组件上使用suppressHydrationWarning prop(docs)。
或者您可以根本不在服务器上呈现该组件。或强制UTC格式。但是suppressHydrationWarning可能是这里最好的解决方案。

相关问题