clerk-hello-world

# Clerk Hello World ## Overview Make your first authenticated requests using Clerk across server components, client components, API routes, and server actions. Validates your Clerk integration end-to-end. ## Prerequisites - Clerk SDK installed (`clerk-install-auth` completed) - Environment variables configured (`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`) - ClerkProvider wrapping application root - Middleware configured at project root ## Instructions ### Step 1: Server Component — auth() and currentUser() ```typescript // app/dashboard/page.tsx import { auth, currentUser } from '@clerk/nextjs/server' import { redirect } from 'next/navigation' export default async function DashboardPage() { // auth() is lightweight — reads JWT from the session cookie, no API call const { userId } = await auth() if (!userId) redirect('/sign-in') // currentUser() makes a Backend API call — use sparingly, counts toward rate limit const user = await currentUser() return ( <div> <h1>Hello, {user?.firstName || 'User'}!</h1> <p>User ID: {userId}</p> <p>Email: {user?.emailAddresses[0]?.emailAddress}</p> <p>Created: {user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : 'N/A'}</p> </div> ) } ``` **Key distinction:** `auth()` is cheap (JWT parsing, no network). `currentUser()` is expensive (Backend API call, rate-limited). Prefer `auth()` when you only need `userId`, `orgId`, or `sessionClaims`. ### Step 2: Protected API Ro...