Supabase with Next.js Guide 1: Basic Setup & Supabase Project Creation

1. Basic Setup & Supabase Project Creation

This section guides you through setting up your first Supabase project and connecting it to a new Next.js (App Router) application. This forms the foundation for building your full-stack application.

1.1. Create a Supabase Project

Visit Supabase Dashboard, log in, and click "New project". Choose your preferred region and create a new project. Once created, navigate to Project Settings > API to find your project's URL and anon public key.

1.2. Initialize Next.js Project (App Router)

Create a new Next.js project using the App Router. Ensure you select "Yes" for App Router when prompted.

npx create-next-app@latest my-supabase-app --typescript --eslint

1.3. Install Supabase Client Libraries

Install the necessary Supabase client libraries in your Next.js project.

npm install @supabase/supabase-js
npm install @supabase/ssr

1.4. Configure Environment Variables

Create a .env.local file in your Next.js project root and add your Supabase project URL and anon key.

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Note: NEXT_PUBLIC_ prefix makes these variables available on the client-side.

1.5. Create Supabase Client Instance

In your Next.js project, create a utility file (e.g., lib/supabase/client.ts and lib/supabase/server.ts) to initialize the Supabase client. This separation is crucial for the App Router.

Client-side Supabase Client (`lib/supabase/client.ts`):

import { createBrowserClient } from '@supabase/ssr'

export const createClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

Server-side Supabase Client (`lib/supabase/server.ts`):

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const createClient = () => {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: any) {
          cookieStore.set({ name, value, ...options })
        },
        remove(name: string, options: any) {
          cookieStore.set({ name, value: '', ...options })
        },
      },
    }
  )
}

You now have a basic Next.js project ready to interact with Supabase.

Page 1: Basic Setup & Supabase Project Creation