This content originally appeared on DEV Community and was authored by Brayan
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.
This content originally appeared on DEV Community and was authored by Brayan
Brayan | Sciencx (2025-04-03T05:16:29+00:00) Integrating Supabase with Next.js: A Step-by-Step Guide. Retrieved from https://www.scien.cx/2025/04/03/integrating-supabase-with-next-js-a-step-by-step-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.