DEV Community

Brayan
Brayan

Posted on

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

  1. Go to Supabase and sign up or log in.
  2. 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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

Database Setup

Step 5: Create Tables and Insert Data

  1. In the Supabase dashboard, navigate to the SQL editor.
  2. Create a new table using SQL: 
CREATE TABLE profiles (
  id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
  username text UNIQUE,
  avatar_url text
);
Enter fullscreen mode Exit fullscreen mode
  1. 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>;
}
Enter fullscreen mode Exit fullscreen mode

Serverless Functions

Step 7: Deploy Serverless Functions

  1. In the Supabase dashboard, navigate to the Functions section.
  2. Create a new function using SQL or JavaScript.
  3. 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.

Top comments (0)