feat: implement hello component by display user email address

src/app/(auth)/dashboard/layout.tsx

@@ -1,4 +1,3 @@
-import { useClerk } from '@clerk/nextjs';
 import Link from 'next/link';
 
 import { AppConfig } from '@/utils/AppConfig';
@@ -8,8 +7,6 @@ export default function DashboardLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const { signOut } = useClerk();
-
   return (
     <div className="w-full px-1 text-gray-700 antialiased">
       <div className="mx-auto max-w-screen-md">
@@ -45,15 +42,7 @@ export default function DashboardLayout({
 
             <nav>
               <ul className="flex flex-wrap text-xl">
-                <li className="mr-6">
-                  <button
-                    onClick={() => signOut()}
-                    className="border-none text-gray-700 hover:text-gray-900"
-                    type="button"
-                  >
-                    Sign out
-                  </button>
-                </li>
+                <li className="mr-6">Sign out</li>
               </ul>
             </nav>
           </div>

src/app/(auth)/dashboard/page.tsx

@@ -1,16 +1,16 @@
 import type { Metadata } from 'next';
 
+import { Hello } from '@/components/Hello';
+
 export const metadata: Metadata = {
   title: 'Dashboard',
   description: 'User dashboard',
 };
 
-const Dashboard = async () => {
-  return (
-    <div className="content">
-      <p>Hello</p>
-    </div>
-  );
-};
+const Dashboard = () => (
+  <div className="content">
+    <Hello />
+  </div>
+);
 
 export default Dashboard;

src/components/Hello.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { useUser } from '@clerk/nextjs';
+
+const Hello = () => {
+  const { user } = useUser();
+
+  return <p>Hello {user?.primaryEmailAddress?.toString()}</p>;
+};
+
+export { Hello };

src/middleware.ts

@@ -1,6 +1,10 @@
 import { authMiddleware } from '@clerk/nextjs';
+import type { NextRequest } from 'next/server';
 
-export default authMiddleware();
+export default authMiddleware({
+  publicRoutes: (req: NextRequest) =>
+    !req.nextUrl.pathname.startsWith('/dashboard'),
+});
 
 export const config = {
   matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],