Next.jsで投稿日と更新日を表示する

Next.js

microCMS

2026/02/11

PRを含みます

Dateコンポーネントを作成

以下のようなDateコンポーネントを作成した。投稿日のみある時は投稿日のみを表示、更新日がある場合は投稿日＋更新日という形にしている。

import Image from "next/image";
import style from "./index.module.css";
import { formatDate } from "@/app/_libs/utils";

type Props = {
  date: string;
  updatedAt?: string;
};

export default function Date({ date, updatedAt }: Props) {
  return (
    <div className={style.container}>
      <span
        className={style.dateItem}
        aria-label={`投稿日: ${formatDate(date)}`}
      >
        <Image src="/clock.svg" alt="" width={16} height={16} loading="eager" />
        <time dateTime={date}>{formatDate(date)}</time>
      </span>

      {updatedAt && updatedAt !== date && (
        <span
          className={style.dateItem}
          aria-label={`更新日: ${formatDate(updatedAt)}`}
        >
          <Image src="/refresh.svg" alt="" width={16} height={16} />
          <time dateTime={updatedAt}>{formatDate(updatedAt)}</time>
        </span>
      )}
    </div>
  );
}

CSSについては横並びにしたかったので以下のようにしている。適宜調整してみてほしい。

.date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: #616269;
}

.container {
  font-size: 0.9rem;
  display: flex;
  gap: 10px;
  align-items: center;
}

.dateItem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

articleコンポーネントに表示する

あとはブログの記事を表示するコンポーネントで先ほど作成したDateコンポーネントを呼び出す。このブログのパンくずリストから日付周りは以下のようにしている

import Date from "../Date";

<Breadcrumb category={data.category} />
<h1 className={styles.title}>{data.title}</h1>

<div className={styles.meta}>
 {data.tag && data.tag.length > 0 && (
  <div className={styles.tagLinks}>
   {data.tag.map((tag) => (
    <Link
     　key={tag.id}
     　href={`/blog/tag/${tag.id}`}
     　className={styles.tagLink}
    >
    　<Tag tags={[tag]} />
    </Link>
　　　))}
　　</div>
　 )}
</div>
<div className={styles.date}>
 <Date
  date={data.publishedAt ?? data.createdAt}
  updatedAt={data.updatedAt}
 />
　<span className={styles.promotion}>PRを含みます</span>
</div>