Next.js로 관리자 페이지 만들기 — 실전 어드민 패널 구축기

어드민 사이드바 레이아웃 구조

// app/admin/layout.tsx
export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen">
      {/* 사이드바: 고정 너비, 스크롤 독립 */}
      <aside className="w-64 bg-sidebar border-r
                        flex-shrink-0 overflow-y-auto">
        <AdminSidebar />
      </aside>

      {/* 메인 콘텐츠 영역 */}
      <main className="flex-1 p-6 overflow-y-auto">
        {children}
      </main>
    </div>
  );
}

어드민 라우트 구조

app/admin/
  layout.tsx          # 사이드바 + 메인 레이아웃
  page.tsx            # 대시보드 (통계 요약)
  members/
    page.tsx          # 회원 목록 + 검색
    [id]/page.tsx     # 회원 상세/수정
  content/
    page.tsx          # 콘텐츠 관리
  seo/
    page.tsx          # SEO 현황 (IndexNow 등)
  pagespeed/
    page.tsx          # PageSpeed 측정 결과
  email/
    page.tsx          # 이메일 발송
  settings/
    page.tsx          # 서비스 설정

대시보드 페이지 예시

// app/admin/page.tsx
export default async function AdminDashboard() {
  const stats = await getAdminStats();

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">대시보드</h1>
      <div className="grid grid-cols-4 gap-4">
        <StatCard label="전체 회원" value={stats.totalMembers} />
        <StatCard label="오늘 방문자" value={stats.todayVisitors} />
        <StatCard label="블로그 글" value={stats.totalPosts} />
        <StatCard label="평균 PageSpeed" value={stats.avgPageSpeed} />
      </div>
    </div>
  );
}

middleware.ts — 어드민 경로 보호

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // /admin 경로 보호
  if (pathname.startsWith("/admin")) {
    const sessionCookie = request.cookies.get("better-auth.session_token");

    if (!sessionCookie) {
      return NextResponse.redirect(
        new URL("/auth/login", request.url)
      );
    }

    // 세션 유효성은 서버 컴포넌트에서 추가 검증
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/admin/:path*"],
};

API 라우트 구조

app/api/admin/
  members/
    route.ts           # GET: 목록, POST: 생성
    [id]/
      route.ts         # GET: 상세, PUT: 수정, DELETE: 삭제
  pagespeed/
    route.ts           # POST: 측정 실행
    results/
      route.ts         # GET: 측정 결과 조회
  indexnow/
    route.ts           # POST: URL 제출
    history/
      route.ts         # GET: 제출 이력

회원 관리 API 예시

// app/api/admin/members/route.ts
import { adminGuard } from "@/lib/admin-auth";
import { db } from "@/lib/db";
import { users } from "@/lib/db/schema";

export async function GET(req: Request) {
  const session = await adminGuard();
  if (session instanceof NextResponse) return session;

  const { searchParams } = new URL(req.url);
  const page = Number(searchParams.get("page")) || 1;
  const limit = 20;

  const members = await db
    .select()
    .from(users)
    .limit(limit)
    .offset((page - 1) * limit)
    .orderBy(users.createdAt);

  return NextResponse.json({ members, page, limit });
}