This documentation is for a legacy version of Next.js Supabase. For the latest version, please visit the Next.js Supabase Turbo documentation

How to

Setup

Project Configuration Branding Updating the Logo Updating the Fonts Updating the Favicons Environment variables Setting up Emails

Marketing Pages

Updating the Navigation menu Adding Pages

User Interface

Dark Theme Theming

API Routes

Adding API Routes Calling API Routes from the client API Routes vs Server Actions

Server Actions

Server Actions Sending CSRF Token to Actions Server Actions Error Handling

Application Pages

Adding Pages Updating the Sidebar menu Guarding Pages

Authentication

Change Authentication strategy Setup oAuth

Contextual Data

Fetching the signed in User Fetching the selected Organization

Database

Seeding Local Data Resetting the local DB Generating Database Types

Reading Data

Reading Records from Postgres

Writing Data

Creating a Record

Payments

Configuring Plans Running the Stripe Webhook locally Using Lemon Squeezy instead of Stripe

Translations

Adding a new translation string Setting a Default Language Adding a new language Adding a new translation file Using the Language Switcher Detect current Locale

Troubleshooting

Supabase is not starting Supabase is not stopping Tables/Functions not found Contentlayer gets stuck Dynamic server usage error 403 error with API/Actions

Getting Started

Introduction Technical Details Clone the repository Running the application Navigating the Codebase

Configuration

Global Configuration Environment Variables Feature Flags

Architecture

Architecture and Folder Structure Structure your Application Data Model

Authentication

Auth Overview Setup

UI

Tailwind CSS Shadcn UI Themes

Data Fetching

Writing data to Database Fetching data from Supabase Mutating data using Server Actions API Routes Uploading data to Storage

Development

Commands Code Style Translations and Locales Sending Emails Validating API payload with Zod Logging Enable CORS Encrypting Secrets User Roles

Organizations

Overview User Permissions Subscription Permissions RLS Policies Custom React Hooks

Admin

Overview Adding Admins

Blog and Documentation

Blog Documentation

Payments

Stripe Configuration Stripe Webhooks One-Time Payments Migrate to Lemon Squeezy

SDK

The Makerkit SDK User SDK Organization SDK Organization Subscription SDK Data Loader SDK

Migrations

Migrating to 0.2.0 Migrating to 0.3.0

Testing

Running Tests CI Tests

Going to Production

Production Checklist

Plugins

Cookie Banner Feedback Popup AI Chatbot AI Text Editor

Documentation
Next.js Supabase
Environment Variables

Environment Variables

Learn how to use environment variables in your Next.js project.

The starter project comes with two different environment variables files:

.env: the main environment file - use this for variables that are common to all environments - and that are not secrets.
.env.development: the development environment file (used when running the project locally in development mode) - when they're specific to the development environment.
.env.production: the production environment file (used when deploying or running the build command) - when they're specific to the production environment.
.env.local: this environment file is loaded when running the project locally. It won't be committed to Git. Useful for adding secrets that you don't want to commit to Git.
.env.test: this environment file is loaded when running the Cypress E2E tests. You would rarely need to use this.

PreviousProject Configuration NextTailwind CSS and Styling

Subscribe to our Newsletter

Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS