fp/packages/next/app/components/localized-date.tsx

import { formatISO } from "date-fns";

interface ILocalizedDateProps {
    date: Date;
}

/**
 * 
 * this causes hydration issues
 * 
 * Error: Text content does not match server-rendered HTML.
 *
 * Warning: Text content did not match. Server: "2024-01-01" Client: "2023-12-31"
 * 
 * See more info here: https://nextjs.org/docs/messages/react-hydration-error
 */

export function LocalizedDate ({ date }: ILocalizedDateProps) {
    const isoDateTime = formatISO(date);
    const isoDate = formatISO(date, { representation: 'date' });
    return (
        <>
            <time dateTime={isoDateTime}>{isoDate}</time>
        </>
    )
}