Setting Up a Next.js Project with Payload CMS and Supabase

This guide walks you through setting up a production-ready Next.js application with Payload CMS for content management and Supabase as the PostgreSQL database.

Prerequisites

You'll need Node.js 20+, a Supabase account (free tier works for development), and a Vercel account for deployment. Familiarity with TypeScript and React is assumed.

Step 1: Initialize the Project

Start with create-payload-app using the blank template and PostgreSQL adapter. This gives you a clean Next.js + Payload setup with the admin panel already configured.

Step 2: Connect Supabase

Grab your Supabase connection pooler URL (port 6543, not 5432) and set it as DATABASE_URI. The pooler URL is essential for serverless environments like Vercel.