13장: 실전 프로젝트 - Next.js 풀스택 앱 구축

export default function PublicLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white
      dark:from-gray-950 dark:to-gray-900">
      <header className="mx-auto max-w-4xl px-6 py-8">
        <h1 className="text-2xl font-bold">Link Shortener</h1>
      </header>
      <main className="mx-auto max-w-4xl px-6">
        {children}
      </main>
    </div>
  );
}

import { DashboardShell } from '@/components/DashboardShell';
 
export default function DashboardLayout({
  children,
  stats,
  recent,
}: {
  children: React.ReactNode;
  stats: React.ReactNode;
  recent: React.ReactNode;
}) {
  return (
    <DashboardShell>
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2">{children}</div>
        <aside className="space-y-6">
          {stats}
          {recent}
        </aside>
      </div>
    </DashboardShell>
  );
}

import { Suspense } from 'react';
import { StatsCard } from '@/components/StatsCard';
import { getStats } from '@/lib/analytics';
 
export default async function StatsPanel() {
  const stats = await getStats();
 
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">통계 요약</h2>
      <StatsCard title="총 링크" value={stats.totalLinks} />
      <StatsCard title="총 클릭" value={stats.totalClicks} />
      <StatsCard title="오늘 클릭" value={stats.todayClicks} />
    </div>
  );
}

export default function StatsLoading() {
  return (
    <div className="space-y-4">
      <div className="h-6 w-24 animate-pulse rounded bg-gray-200
        dark:bg-gray-800" />
      {Array.from({ length: 3 }).map((_, i) => (
        <div
          key={i}
          className="h-20 animate-pulse rounded-lg bg-gray-200
            dark:bg-gray-800"
        />
      ))}
    </div>
  );
}

import { getRecentLinks } from '@/lib/cache';
 
export default async function RecentLinks() {
  const links = await getRecentLinks();
 
  return (
    <div className="space-y-3">
      <h2 className="text-lg font-semibold">최근 생성</h2>
      <ul className="space-y-2">
        {links.map(link => (
          <li key={link.id} className="rounded-lg border p-3">
            <p className="font-mono text-sm text-blue-600 dark:text-blue-400">
              /{link.code}
            </p>
            <p className="truncate text-xs text-gray-500">
              {link.originalUrl}
            </p>
          </li>
        ))}
      </ul>
    </div>
  );
}

import { getLink } from '@/lib/db';
import { LinkPreviewModal } from '@/components/LinkPreviewModal';
 
interface PageProps {
  params: Promise<{ id: string }>;
}
 
export default async function LinkInterceptedPage({ params }: PageProps) {
  const { id } = await params;
  const link = await getLink(id);
 
  if (!link) return null;
 
  return (
    <LinkPreviewModal link={link} />
  );
}

'use client';
 
import { useRouter } from 'next/navigation';
 
interface Link {
  id: string;
  code: string;
  originalUrl: string;
  clicks: number;
  createdAt: string;
}
 
export function LinkPreviewModal({ link }: { link: Link }) {
  const router = useRouter();
 
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
      onClick={() => router.back()}
      role="dialog"
      aria-modal="true"
      aria-label="링크 미리보기"
    >
      <div
        className="w-full max-w-lg rounded-xl bg-white p-6
          shadow-2xl dark:bg-gray-900"
        onClick={(e) => e.stopPropagation()}
      >
        <h2 className="text-xl font-bold">링크 상세</h2>
 
        <dl className="mt-4 space-y-3">
          <div>
            <dt className="text-sm text-gray-500">단축 코드</dt>
            <dd className="font-mono text-lg">/{link.code}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">원본 URL</dt>
            <dd className="break-all text-sm">{link.originalUrl}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">클릭 수</dt>
            <dd className="text-2xl font-bold">{link.clicks}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">생성일</dt>
            <dd className="text-sm">{link.createdAt}</dd>
          </div>
        </dl>
 
        <button
          onClick={() => router.back()}
          className="mt-6 w-full rounded-lg bg-gray-100 py-2
            text-sm font-medium hover:bg-gray-200
            dark:bg-gray-800 dark:hover:bg-gray-700"
        >
          닫기
        </button>
      </div>
    </div>
  );
}

'use server';
 
import { z } from 'zod';
import { nanoid } from 'nanoid';
import { after } from 'next/server';
import { revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@/lib/db';
import { trackEvent } from '@/lib/analytics';
 
const CreateLinkSchema = z.object({
  url: z.string().url('올바른 URL을 입력하세요'),
  customCode: z
    .string()
    .regex(/^[a-zA-Z0-9-]*$/, '영문, 숫자, 하이픈만 사용 가능합니다')
    .max(20, '20자 이내로 입력하세요')
    .optional()
    .transform(val => val || undefined),
});
 
interface ActionState {
  errors?: Record<string, string[]>;
  message?: string;
  data?: { code: string; shortUrl: string };
}
 
export async function createLink(
  prevState: ActionState,
  formData: FormData
): Promise<ActionState> {
  // 1. 입력 검증
  const validatedFields = CreateLinkSchema.safeParse({
    url: formData.get('url'),
    customCode: formData.get('customCode'),
  });
 
  if (!validatedFields.success) {
    return { errors: validatedFields.error.flatten().fieldErrors };
  }
 
  const { url, customCode } = validatedFields.data;
  const code = customCode ?? nanoid(7);
 
  // 2. 중복 확인
  const existing = await db.links.findUnique({ where: { code } });
  if (existing) {
    return { message: '이미 사용 중인 코드입니다. 다른 코드를 입력하세요.' };
  }
 
  // 3. 링크 생성
  try {
    await db.links.create({
      data: {
        code,
        originalUrl: url,
        clicks: 0,
      },
    });
  } catch {
    return { message: '링크 생성에 실패했습니다.' };
  }
 
  // 4. 캐시 무효화
  revalidateTag('links');
  revalidateTag('stats');
 
  // 5. 응답 후 분석 이벤트 (8장 after() API)
  after(async () => {
    await trackEvent('link_created', { code, url });
  });
 
  return {
    data: {
      code,
      shortUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/${code}`,
    },
  };
}
 
export async function deleteLink(id: string): Promise<ActionState> {
  try {
    await db.links.delete({ where: { id } });
  } catch {
    return { message: '링크 삭제에 실패했습니다.' };
  }
 
  revalidateTag('links');
  revalidateTag('stats');
 
  after(async () => {
    await trackEvent('link_deleted', { id });
  });
 
  redirect('/dashboard/links');
}

'use client';
 
import { useActionState } from 'react';
import { createLink } from '@/actions/links';
 
export function LinkForm() {
  const [state, formAction, isPending] = useActionState(createLink, {});
 
  return (
    <form action={formAction} className="space-y-4">
      {state.message && (
        <div className="rounded-lg bg-red-50 p-3 text-sm text-red-600
          dark:bg-red-900/20 dark:text-red-400">
          {state.message}
        </div>
      )}
 
      {state.data && (
        <div className="rounded-lg bg-green-50 p-4 dark:bg-green-900/20">
          <p className="text-sm text-green-600 dark:text-green-400">
            링크가 생성되었습니다
          </p>
          <p className="mt-1 font-mono text-lg font-bold text-green-700
            dark:text-green-300">
            {state.data.shortUrl}
          </p>
        </div>
      )}
 
      <div>
        <label htmlFor="url" className="block text-sm font-medium">
          URL
        </label>
        <input
          id="url"
          name="url"
          type="url"
          required
          placeholder="https://example.com/very-long-url-that-needs-shortening"
          className="mt-1 w-full rounded-lg border px-4 py-3
            focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {state.errors?.url && (
          <p className="mt-1 text-sm text-red-600">{state.errors.url[0]}</p>
        )}
      </div>
 
      <div>
        <label htmlFor="customCode" className="block text-sm font-medium">
          커스텀 코드 (선택)
        </label>
        <input
          id="customCode"
          name="customCode"
          type="text"
          placeholder="my-link"
          className="mt-1 w-full rounded-lg border px-4 py-3
            focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {state.errors?.customCode && (
          <p className="mt-1 text-sm text-red-600">
            {state.errors.customCode[0]}
          </p>
        )}
      </div>
 
      <button
        type="submit"
        disabled={isPending}
        className="w-full rounded-lg bg-blue-600 py-3 font-medium text-white
          hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isPending ? '생성 중...' : '단축 링크 생성'}
      </button>
    </form>
  );
}

'use cache';
 
import { cacheLife, cacheTag } from 'next/cache';
import { db } from '@/lib/db';
 
export async function getPopularLinks(limit: number = 10) {
  cacheLife('hours');
  cacheTag('links', 'popular');
 
  return db.links.findMany({
    orderBy: { clicks: 'desc' },
    take: limit,
    select: {
      id: true,
      code: true,
      originalUrl: true,
      clicks: true,
    },
  });
}
 
export async function getRecentLinks(limit: number = 5) {
  cacheLife('minutes');
  cacheTag('links', 'recent');
 
  return db.links.findMany({
    orderBy: { createdAt: 'desc' },
    take: limit,
    select: {
      id: true,
      code: true,
      originalUrl: true,
      createdAt: true,
    },
  });
}
 
export async function getLinkByCode(code: string) {
  cacheLife('days');
  cacheTag(`link-${code}`);
 
  return db.links.findUnique({
    where: { code },
    select: {
      id: true,
      code: true,
      originalUrl: true,
    },
  });
}

import { Suspense } from 'react';
import { LinkList } from '@/components/LinkList';
 
export default function LinksPage() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">내 링크</h1>
      </div>
 
      <Suspense fallback={<LinkListSkeleton />}>
        <LinkList />
      </Suspense>
    </div>
  );
}
 
function LinkListSkeleton() {
  return (
    <div className="space-y-3">
      {Array.from({ length: 5 }).map((_, i) => (
        <div
          key={i}
          className="h-16 animate-pulse rounded-lg bg-gray-200
            dark:bg-gray-800"
        />
      ))}
    </div>
  );
}

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { after } from 'next/server';
 
export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
 
  // 시스템 경로는 통과
  if (
    pathname.startsWith('/dashboard') ||
    pathname.startsWith('/api') ||
    pathname.startsWith('/_next') ||
    pathname.startsWith('/og') ||
    pathname === '/' ||
    pathname === '/favicon.ico'
  ) {
    return NextResponse.next();
  }
 
  // 단축 코드 추출 (예: /abc123)
  const code = pathname.slice(1);
  if (!code || code.includes('/')) {
    return NextResponse.next();
  }
 
  // 링크 조회
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_SITE_URL}/api/links?code=${code}`,
      { next: { tags: [`link-${code}`] } }
    );
 
    if (!response.ok) {
      return NextResponse.next(); // 404 페이지로 fallback
    }
 
    const link = await response.json();
 
    // 응답 후 클릭 통계 기록
    after(async () => {
      await fetch(
        `${process.env.NEXT_PUBLIC_SITE_URL}/api/links/${link.id}/click`,
        { method: 'POST' }
      );
    });
 
    return NextResponse.redirect(link.originalUrl, 307);
  } catch {
    return NextResponse.next();
  }
}
 
export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

import type { Metadata } from 'next';
import { LinkForm } from '@/components/LinkForm';
 
export const metadata: Metadata = {
  title: 'Link Shortener - URL 단축 서비스',
  description: '긴 URL을 짧고 기억하기 쉬운 링크로 변환합니다. 클릭 통계와 분석을 제공합니다.',
  openGraph: {
    title: 'Link Shortener',
    description: 'URL 단축 서비스',
    images: [{ url: '/og/default', width: 1200, height: 630 }],
  },
};
 
export default function HomePage() {
  return (
    <div className="py-16">
      <div className="text-center">
        <h2 className="text-4xl font-bold tracking-tight">
          URL을 짧게, 분석은 깊게
        </h2>
        <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
          긴 URL을 단축하고 클릭 통계를 추적합니다.
        </p>
      </div>
 
      <div className="mx-auto mt-12 max-w-xl">
        <LinkForm />
      </div>
    </div>
  );
}

import type { Instrumentation } from 'next';
 
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { initOpenTelemetry } = await import('./lib/telemetry');
    initOpenTelemetry();
  }
}
 
export const onRequestError: Instrumentation.onRequestError = async (
  error,
  request,
  context
) => {
  // 에러 리포팅 서비스로 전송
  if (process.env.NODE_ENV === 'production') {
    await fetch(process.env.ERROR_REPORTING_URL!, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        message: error.message,
        url: request.url,
        routeType: context.routeType,
        timestamp: new Date().toISOString(),
      }),
    });
  }
};