π¦ Connect Supabase in your Next.js mobile app
1. Create Your Supabase Project
- Go to supabase.com (opens in a new tab) and sign in.
- Click New Project.
- Fill in:
- Project name
- Strong database password
- Region (choose the closest to your users)
- Click Create Project
β³ Wait ~1 minute for your database to be provisioned.
2. Get Your Supabase Keys
- In your Supabase project, go to Settings β API
- Copy the following:
SUPABASE_URL
SUPABASE_ANON_KEY
3. Add to Your .env
File
Paste the values into your .env
:
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
π Replacing Supabase with Your Own Postgres Setup (Advanced)
If you prefer full control, you can swap Supabase with your own hosted PostgreSQL database.
Set Up Your Own Postgres Database
Use a managed service like:
β’ Render
β’ Neon
β’ DigitalOcean
β’ Or host it yourself.
Make sure to configure:
β’ Database URL
β’ Authentication method
β’ Allowed IPs
β’ SSL if needed
Update Your Environment Variables
Instead of Supabase variables, use a direct Postgres connection string:
DATABASE_URL=postgresql://user:password@host:port/database
You can either:
β’ Use Prisma ORM
β’ Or build your own queries using a library like pg
β Why Itβs Set Up This Way
NextNative uses Supabase only for convenience. But everything is decoupled, so you can fully swap out the database layer without touching your Auth, or frontend logic.