Fix date formatting for rehydration

website/src/components/DateDisplay.tsx

@@ -0,0 +1,25 @@
+import addMinutes from 'date-fns/addMinutes';
+import format from 'date-fns/format';
+import parseISO from 'date-fns/parseISO';
+import { useEffect, useState } from 'react';
+
+function formatDate(date: Date, dateFormat: string) {
+  return format(addMinutes(date, date.getTimezoneOffset()), dateFormat);
+}
+
+interface DateDisplayProps {
+  date: string;
+  format: string;
+}
+
+const DateDisplay = ({ date: dateString, format: dateFormat }: DateDisplayProps) => {
+  const [date, setDate] = useState(`${formatDate(parseISO(dateString), dateFormat)} UTC`);
+
+  useEffect(() => {
+    setDate(format(parseISO(dateString), dateFormat));
+  }, [dateFormat, dateString]);
+
+  return <>{date}</>;
+};
+
+export default DateDisplay;

website/src/pages/index.tsx

@@ -5,10 +5,9 @@ import CardContent from '@mui/material/CardContent';
 import Chip from '@mui/material/Chip';
 import { styled, useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import format from 'date-fns/format';
-import parseISO from 'date-fns/parseISO';
 import Link from 'next/link';
 
+import DateDisplay from '../components/DateDisplay';
 import Container from '../components/layout/Container';
 import Page from '../components/layout/Page';
 import config from '../lib/config';
@@ -341,7 +340,7 @@ const Home = ({ docsGroups }: DocsMenuProps) => {
                       >
                         <>
                           <Chip label={release.version} color="secondary" />
-                          {format(parseISO(release.date), 'MMMM dd, yyyy')}
+                          <DateDisplay date={release.date} format="MMMM dd, yyyy" />
                         </>
                       </Typography>
                       <Typography variant="body2" color="text.secondary">