Next.js 16, Supabase, 그리고 Edge Functions로 고성능 링크 단축기 만들기

Source: Dev.to

아키텍처

애플리케이션은 두 부분으로 나뉩니다:

• 대시보드: 링크 관리, 분석 보기, 인증 처리를 위한 표준 Next.js App Router 애플리케이션(서버 컴포넌트)
• 리다이렉트 엔진: 고트래픽 리다이렉션 로직을 담당하는 초경량 Edge Route

1. 데이터베이스 스키마 (Supabase)

간단하게 유지합니다. Supabase를 통해 PostgreSQL을 사용합니다. 핵심은 links와 clicks 두 테이블로 구성됩니다.

-- The core links table
create table links (
  id uuid default gen_random_uuid() primary key,
  code text unique not null,               -- The slug (e.g. 'hostgator')
  destination_url text not null,
  is_active boolean default true,
  group_id uuid references groups(id),    -- For organizing campaigns
  created_at timestamp with time zone default timezone('utc'::text, now())
);

-- The analytics table
create table clicks (
  id uuid default gen_random_uuid() primary key,
  link_id uuid references links(id),
  country text,          -- e.g. "US"
  city text,
  device_type text,     -- "mobile", "desktop"
  os_name text,
  browser_name text,
  created_at timestamp with time zone default timezone('utc'::text, now())
  -- NOTICE: No IP address column!
);

2. Edge 리다이렉트 (재미있는 부분)

리다이렉션에 Node.js를 거의 사용하지 않습니다. 대신 Edge Runtime에서 코드를 실행하여 Vercel 또는 Netlify의 전 세계 엣지 네트워크에서 사용자와 가까운 위치에서 동작하도록 합니다.

// src/app/[code]/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { createClient } from '@/lib/supabase/server'

export const runtime = 'edge' //