Fix SSR hydration issue

package.json

@@ -27,6 +27,7 @@
     "@vercel/speed-insights": "^1.0.10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "lucide-react": "^0.378.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",

src/components/app/posts-list/posts-list.tsx

@@ -1,7 +1,9 @@
 "use client";
 import Link from "next/link";
+import { format as formatDate } from "date-fns/format";
 import { Separator } from "@/components/ui/separator";
 import { BlogPost } from "@/lib/definitions";
+import { DATE_FORMAT } from "@/lib/constants";
 
 interface PostsListProps {
   posts: BlogPost[];
@@ -15,7 +17,8 @@ export const PostsList: React.FC<PostsListProps> = ({ posts }) => {
           <div>
             <div className="space-y-1">
               <p className="text-xs text-muted-foreground">
-                {createdAt.toLocaleString()}
+                {/* TODO: Remove hard-coded locale */}
+                {formatDate(createdAt, DATE_FORMAT)}
               </p>
 
               <h2 className="text-4xl leading-none capitalize">

src/components/app/posts-table/posts-table.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { format as formatDate } from "date-fns/format";
 import { ColumnDef } from "@tanstack/react-table";
 import { BlogPost } from "@/lib/definitions";
 import { DataTable } from "./data-table";
 import { ActionsCell } from "./actions-cell";
+import { DATE_FORMAT } from "@/lib/constants";
 
 interface PostsTableProps {
   posts: BlogPost[];
@@ -18,7 +20,7 @@ export const PostsTable: React.FC<PostsTableProps> = ({ posts }) => {
     {
       accessorKey: "createdAt",
       header: "Created on",
-      cell: ({ row }) => row.original.createdAt.toDateString(),
+      cell: ({ row }) => formatDate(row.original.createdAt, DATE_FORMAT),
     },
     {
       id: "actions",

src/lib/constants.ts

@@ -1 +1,2 @@
 export const POST_LIST_PAGE_SIZE = 10;
+export const DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";