// app/users/page.tsx — Server Component (기본, 'use client' 없음) import { prisma } from '@/lib/prisma'; import { DataTable } from '@/components/data-table'; import { columns } from './_components/columns'; interface SearchParams { page?: string; search?: string; } export default async function UsersPage({ searchParams, }: { searchParams: Promise<SearchParams>; }) { const { page = '1', search } = await searchParams; const take = 20; const skip = (parseInt(page) - 1) * take; const [users, total] = await Promise.all([ prisma.user.findMany({ where: search ? { nickname: { contains: search, mode: 'insensitive' } } : undefined, take, skip, orderBy: { createdAt: 'desc' }, }), prisma.user.count({ where: search ? { nickname: { contains: search, mode: 'insensitive' } } : undefined, }), ]); return ( <div className="space-y-4"> <h1 className="text-2xl font-bold">유저 관리</h1> <DataTable columns={columns} data={users} total={total} page={parseInt(page)} /> </div> ); }

// app/users/_components/user-actions.tsx 'use client'; import { useActionState } from 'react'; import { banUser } from '@/lib/actions/user-actions'; import { Button } from '@/components/ui/button'; export function BanUserButton({ userId }: { userId: string }) { const [state, action, isPending] = useActionState( banUser.bind(null, userId), null, ); return ( <form action={action}> <Button variant="destructive" disabled={isPending}> {isPending ? '처리 중...' : '정지'} </Button> {state?.error && <p className="text-red-500 text-sm">{state.error}</p>} </form> ); }

// client/actions/user-actions.ts 'use server'; import { revalidatePath } from 'next/cache'; import { prisma } from '@/lib/prisma'; import { auth } from '@/lib/auth'; import { z } from 'zod'; const banUserSchema = z.object({ reason: z.string().min(1).max(500), }); export async function banUser(userId: string, _prev: unknown, formData: FormData) { // 1. 인증 확인 const session = await auth(); if (!session?.user || session.user.role !== 'ADMIN') { return { error: '권한이 없습니다' }; } // 2. 입력 검증 const parsed = banUserSchema.safeParse(Object.fromEntries(formData)); if (!parsed.success) { return { error: parsed.error.flatten().fieldErrors }; } // 3. 실행 await prisma.user.update({ where: { id: userId }, data: { isBanned: true, bannedReason: parsed.data.reason }, }); // 4. 캐시 무효화 revalidatePath('/users'); return { success: true }; }

// client/prisma.ts import { PrismaClient } from '@prisma/client'; const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }; export const prisma = globalForPrisma.prisma ?? new PrismaClient({ log: process.env.NODE_ENV === 'development' ? ['query'] : [], }); if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

// app/layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ko"> <body> <Sidebar /> <main className="ml-64 p-6">{children}</main> </body> </html> ); } // app/users/loading.tsx — 스켈레톤 UI export default function Loading() { return <TableSkeleton rows={10} />; } // app/users/error.tsx — 에러 바운더리 'use client'; export default function Error({ error, reset }: { error: Error; reset: () => void }) { return ( <div className="text-center py-10"> <p className="text-red-500">{error.message}</p> <Button onClick={reset}>다시 시도</Button> </div> ); }

nextjs-patterns

Next.js App Router 패턴 가이드

Server Component (기본)

Client Component (인터랙션 필요 시만)

Server Action

Prisma 싱글턴 (Next.js용)

Layout + 에러/로딩 패턴

규칙