Integrating Supabase with Next.js: A Step-by-Step Guide

Integrating Supabase with Next.js: A Step-by-Step Guide Introduction Integrating Supabase with Next.js can significantly enhance your application's capabilities by providing a robust backend with real-time features, authentication, and serverless functions. In this tutorial, we'll walk through the process of setting up Supabase with Next.js, covering authentication, database setup, real-time subscriptions, and serverless functions. Setting Up Supabase Step 1: Create a Supabase Project Go to Supabase and sign up or log in. Create a new project and note down your API keys and project URL. Step 2: Install Supabase Client In your Next.js project, install the Supabase client: npm install @supabase/supabase-js Authentication with Supabase Step 3: Configure Supabase Client Create a new file supabaseClient.js in your project: import { createClient } from '@supabase/supabase-js'; const supabaseUrl = 'https://your-project-url.supabase.co'; const supabaseAnonKey = 'your-anon-key'; export const supabase = createClient(supabaseUrl, supabaseAnonKey); Step 4: Implement Authentication Use Supabase's authentication methods in your Next.js pages: // pages/login.js import { supabase } from '../supabaseClient'; export default function Login() { const handleLogin = async () => { const { user, error } = await supabase.auth.signIn({ email: 'user@example.com', password: 'password', }); if (error) console.error('Error logging in:', error); else console.log('Logged in user:', user); }; return Log In; } Database Setup Step 5: Create Tables and Insert Data In the Supabase dashboard, navigate to the SQL editor. Create a new table using SQL: CREATE TABLE profiles ( id uuid PRIMARY KEY DEFAULT uuid_generate_v4(), username text UNIQUE, avatar_url text ); Insert initial data if needed. Real-time Subscriptions Step 6: Set Up Real-time Listeners Use Supabase's real-time capabilities to listen for changes: // pages/index.js import { useEffect } from 'react'; import { supabase } from '../supabaseClient'; export default function Home() { useEffect(() => { const subscription = supabase .from('profiles') .on('INSERT', payload => { console.log('New profile:', payload.new); }) .subscribe(); return () => { supabase.removeSubscription(subscription); }; }, []); return Real-time Profiles; } Serverless Functions Step 7: Deploy Serverless Functions In the Supabase dashboard, navigate to the Functions section. Create a new function using SQL or JavaScript. Deploy the function and test it using the Supabase client. Conclusion Integrating Supabase with Next.js provides a powerful combination for building modern web applications. By following this guide, you can set up authentication, manage your database, and implement real-time features and serverless functions efficiently. Explore further by customizing your setup to fit your specific needs.

Apr 3, 2025 - 06:34

Integrating Supabase with Next.js: A Step-by-Step Guide

Introduction

Integrating Supabase with Next.js can significantly enhance your application's capabilities by providing a robust backend with real-time features, authentication, and serverless functions. In this tutorial, we'll walk through the process of setting up Supabase with Next.js, covering authentication, database setup, real-time subscriptions, and serverless functions.

Setting Up Supabase

Step 1: Create a Supabase Project

Go to Supabase and sign up or log in.
Create a new project and note down your API keys and project URL.

Step 2: Install Supabase Client

In your Next.js project, install the Supabase client:

npm install @supabase/supabase-js

Authentication with Supabase

Step 3: Configure Supabase Client

Create a new file supabaseClient.js in your project:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-url.supabase.co';
const supabaseAnonKey = 'your-anon-key';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Step 4: Implement Authentication

Use Supabase's authentication methods in your Next.js pages:

// pages/login.js
import { supabase } from '../supabaseClient';

export default function Login() {
  const handleLogin = async () => {
    const { user, error } = await supabase.auth.signIn({
      email: 'user@example.com',
      password: 'password',
    });
    if (error) console.error('Error logging in:', error);
    else console.log('Logged in user:', user);
  };

  return <button onClick={handleLogin}>Log In</button>;
}

Database Setup

Step 5: Create Tables and Insert Data

In the Supabase dashboard, navigate to the SQL editor.
Create a new table using SQL:

CREATE TABLE profiles (
  id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
  username text UNIQUE,
  avatar_url text
);

Insert initial data if needed.

Real-time Subscriptions

Step 6: Set Up Real-time Listeners

Use Supabase's real-time capabilities to listen for changes:

// pages/index.js
import { useEffect } from 'react';
import { supabase } from '../supabaseClient';

export default function Home() {
  useEffect(() => {
    const subscription = supabase
      .from('profiles')
      .on('INSERT', payload => {
        console.log('New profile:', payload.new);
      })
      .subscribe();

    return () => {
      supabase.removeSubscription(subscription);
    };
  }, []);

  return <div>Real-time Profiles</div>;
}

Serverless Functions

Step 7: Deploy Serverless Functions

In the Supabase dashboard, navigate to the Functions section.
Create a new function using SQL or JavaScript.
Deploy the function and test it using the Supabase client.

Conclusion

Integrating Supabase with Next.js provides a powerful combination for building modern web applications. By following this guide, you can set up authentication, manage your database, and implement real-time features and serverless functions efficiently. Explore further by customizing your setup to fit your specific needs.