Building a High-Performance Link Shortener with Next.js 16, Supabase, and Edge Functions

Source: Dev.to

The Architecture

The application is split into two parts:

• The Dashboard: A standard Next.js App Router application (Server Components) for managing links, viewing analytics, and handling auth.
• The Redirect Engine: An ultra‑lightweight Edge Route handling the high‑traffic redirection logic.

1. The Database Schema (Supabase)

We keep it simple. We use PostgreSQL via Supabase. The core consists of two tables: links and 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. The Edge Redirect (The Fun Part)

We barely use Node.js for the redirects. Instead, we run the code on the Edge Runtime, which executes on Vercel’s or Netlify’s global edge network, closer to the user.

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

export const runtime = 'edge' //