如何在Next.js社交应用中实现MongoDB时间的相对显示？

以下是基于dayjs（轻量推荐）和moment的具体实现方案，完全适配你需要的输出格式：

方案一：使用dayjs（推荐，体积更小） #

1. 安装依赖 #

npm install dayjs dayjs-plugin-relative-time
# 或使用pnpm
pnpm add dayjs dayjs-plugin-relative-time

2. 编写相对时间格式化工具函数 #

在项目中创建utils/formatRelativeTime.js文件：

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

// 加载相对时间插件
dayjs.extend(relativeTime)

export function formatRelativeTime(timestamp) {
  const targetDate = dayjs(timestamp)
  const now = dayjs()
  const diffSeconds = now.diff(targetDate, 'second')

  // 匹配你需要的输出格式
  if (diffSeconds < 60) {
    return 'just now'
  } else if (diffSeconds < 3600) {
    return targetDate.fromNow() // 输出如 "2 minutes ago"
  } else if (diffSeconds < 86400) {
    return targetDate.fromNow() // 输出如 "1 hour ago"
  } else {
    const diffDays = now.diff(targetDate, 'day')
    return `${diffDays} day${diffDays > 1 ? 's' : ''}` // 输出如 "2 days"
  }
}

3. 在组件中使用 #

服务端组件（App Router/Pages Router）

import { formatRelativeTime } from '@/utils/formatRelativeTime'

// 假设从MongoDB获取的posts包含createdAt字段（ISODate类型）
export default async function Posts() {
  const posts = await fetch('your-mongodb-query-api').then(res => res.json())
  
  return (
    <div className="post-list">
      {posts.map(post => (
        <div key={post._id} className="post-item">
          <p>{post.content}</p>
          <span className="post-time">{formatRelativeTime(post.createdAt)}</span>
        </div>
      ))}
    </div>
  )
}

客户端组件（App Router）

需要添加'use client'指令：

'use client'
import { formatRelativeTime } from '@/utils/formatRelativeTime'

export default function PostItem({ post }) {
  return (
    <div className="post-item">
      <p>{post.content}</p>
      <span className="post-time">{formatRelativeTime(post.createdAt)}</span>
    </div>
  )
}

方案二：使用moment #

1. 安装依赖 #

npm install moment
# 或使用pnpm
pnpm add moment

2. 编写格式化工具函数 #

import moment from 'moment'

export function formatRelativeTime(timestamp) {
  const targetDate = moment(timestamp)
  const now = moment()
  const diffSeconds = now.diff(targetDate, 'seconds')

  if (diffSeconds < 60) {
    return 'just now'
  } else if (diffSeconds < 3600) {
    return targetDate.fromNow()
  } else if (diffSeconds < 86400) {
    return targetDate.fromNow()
  } else {
    const diffDays = now.diff(targetDate, 'days')
    return `${diffDays} day${diffDays > 1 ? 's' : ''}`
  }
}

3. 组件使用方式和dayjs一致 #

注意事项 #

• MongoDB存储的createdAt通常是ISODate类型，dayjs/moment可以直接解析，无需额外转换
• 如果使用Next.js App Router的服务端组件，无需担心客户端兼容性问题；客户端组件则确保依赖在客户端正常加载
• 可以根据需求调整时间区间的判断逻辑，比如增加"1 week ago"等格式

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