add datetime.

.env

@@ -6,5 +6,9 @@
 
 DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
 
+#TZ=Asia/Tokyo
+TZ=Asia/Rangoon
+#TZ=UTC
+
 # generated command: $ openssl rand -base64 32
 NEXTAUTH_SECRET=akaCCoY3Gc2jTsid7Ofsl2nxbIdkzoGk3HEW/QM0PV0=

app/_components/Menu.tsx

@@ -105,6 +105,14 @@ export const mainMenu = (
         <ListItemText primary='LeaderLine' />
       </ListItemButton>
     </Link>
+    <Link href='/datetime' passHref>
+      <ListItemButton>
+        <ListItemIcon>
+          <LineAxisIcon />
+        </ListItemIcon>
+        <ListItemText primary='datetime' />
+      </ListItemButton>
+    </Link>
   </React.Fragment>
 );
 

app/datetime/_components/ClientComponent.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import dayjs from 'dayjs';
+
+export default function ClientComponent() {
+  const date = new Date();
+  const dayjsDate = dayjs();
+
+  return (
+    <>
+      <p>Client Component(Date): {date.toLocaleString()}</p>
+      <p>Client Component(Dayjs): {dayjs().toDate().toLocaleString()}</p>
+    </>
+  );
+}

app/datetime/page.tsx

@@ -0,0 +1,24 @@
+import styles from '../page.module.css';
+
+import dayjs from 'dayjs';
+import 'dayjs/locale/my';
+
+import ClientComponent from '@/app/datetime/_components/ClientComponent';
+
+export default function DateTimePage() {
+  const date = new Date();
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <div>
+          <p>Server Component(Date): {date.toLocaleString()}</p>
+          <p>Server Component(Dayjs): {dayjs().toDate().toLocaleString()}</p>
+        </div>
+        <div>
+          <ClientComponent />
+        </div>
+      </div>
+    </main>
+  );
+}