Build Powerful Apps: Next.js + Supabase Integration

What is Supabase?

Supabase is an open-source Backend-as-a-Service (BaaS) that provides:

It's like Firebase but built on SQL and open standards.

Why Supabase + Next.js?

Step 1: Setting Up Supabase Project

Step 2: Installing Supabase in Next.js

In your Next.js project folder, run:

npm install @supabase/supabase-js			
					

Then, create a utility file to initialize Supabase:

// lib/supabaseClient.ts 
import { createClient } from '@supabase/supabase-js' 

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL 
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY 

export const supabase = createClient(supabaseUrl, supabaseAnonKey) 
					

Don't forget to add these env variables in .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url 
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key 					
					

Step 3: Authentication (Sign Up, Sign In, Sign Out)

Sign Up Example:

const handleSignUp = async () => { 
  const { data, error } = await supabase.auth.signUp({ 
    email: 'user@example.com', 
    password: 'strong-password', 
  }) 
  if (error) console.error(error) 
  else console.log('User signed up:', data)
} 					
					

Sign In Example:

const handleSignIn = async () => {
  const { data, error } = await supabase.auth.signInWithPassword({ 
    email: 'user@example.com', 
    password: 'strong-password', 
  }) 
  if (error) console.error(error) 
  else console.log('User signed in:', data) 
}					
					

Sign Out Example:

const handleSignOut = async () => { 
  const { error } = await supabase.auth.signOut() 
  
  if (error) console.error(error) 
  else console.log('Signed out successfully') 
}					
					

Step 4: Working with Realtime Database

Fetch data example:

const fetchTodos = async () => {
  const { data, error } = await supabase.from('todos').select('*') 

  if (error) console.error(error) 
  else console.log('Todos:', data) 
}					
					

Listen to real time changes:

useEffect(() => {
  const channel = supabase 
    .channel('public:todos') 
    .on('postgres_changes', { event: '*', schema: 'public', table: 'todos' }, payload => { 
      console.log('Realtime change:', payload) 
    }) 
    .subscribe() 
  return () => { 
    supabase.removeChannel(channel) 
  } 
}, [])
					

Step 5: Securing APIs with RLS (Row Level Security)

1. In Supabase Dashboard > Table > Enable RLS

Add policies like:

-- Allow authenticated users to select their own data 
CREATE POLICY "Select own todos" 
ON public.todos

FOR SELECT
USING (auth.uid() = user_id);
					

This ensures only logged-in users can access their own data.

Bonus: Server-side Auth with Next.js

In API routes or getServerSideProps, you can verify sessions like this:

import { createServerClient } from '@supabase/auth-helpers-nextjs'
import { GetServerSidePropsContext } from 'next'
export async function getServerSideProps(context: GetServerSidePropsContext) { 
  const supabase = createServerClient(context) 
  const { data: { session } } = await supabase.auth.getSession()
  if (!session) { 
    return { redirect: { destination: '/login', permanent: false } }
  }
  return { 
    props: {
      user: session.user,
    },
  }
}					
					

Useful Links: