πŸš€ Launch mobile apps 10x faster with Next.jsGet NextNative β†’
✨ Features
πŸ—‚οΈ Database

πŸ“¦ Connect Supabase in your Next.js mobile app

1. Create Your Supabase Project

  1. Go to supabase.com (opens in a new tab) and sign in.
  2. Click New Project.
  3. Fill in:
    • Project name
    • Strong database password
    • Region (choose the closest to your users)
  4. Click Create Project

⏳ Wait ~1 minute for your database to be provisioned.


2. Get Your Supabase Keys

  1. In your Supabase project, go to Settings β†’ API
  2. 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.


NextNative Docs