Menu
Next.js App Router 패턴. Server Components, Server Actions, 데이터 페칭.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | nextjs-patterns |
| description | Next.js App Router 패턴. Server Components, Server Actions, 데이터 페칭. |
| globs | cms/app/**, cms/lib/**, cms/components/** |
// 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>
);
}
'use client'는 인터랙션/브라우저 API 필요 시만'use server')safeParserevalidatePath / revalidateTagerror.tsx 바운더리 + try-catch in Server Actionsloading.tsx 스켈레톤next/image 최적화any 타입 금지Figma MCP 로 디자인을 픽셀 퍼펙트로 구현. 토큰 추출 → 테마 매핑 → 정확한 레이아웃 → 스크린샷 diff 검증 루프. Flutter/React 공용.
Flutter 외부/BaaS API 연동 풀 파이프라인. 계약 → retrofit 코드젠 → dio 인터셉터(auth/retry) → Result 매핑 → repository → 오프라인 캐시. dio-retrofit 스킬 심화.
TanStack Query v5 패턴 (React). 서버 상태 패칭/캐시/뮤테이션/낙관적 업데이트.
Supabase BaaS 연동 패턴 (Flutter). 인증/DB/리얼타임/스토리지/RLS.
Auth.js v5 (NextAuth) 패턴. 세션/미들웨어/Server Action 가드.
Cross-stack API 계약 동기화. NestJS DTO ↔ Flutter DTO 일치성 관리.