Supabase integration in Next.js

Supabase is an open‑source alternative to Firebase with a great developer experience.

Installation

Копировать
1pnpm add @supabase/supabase-js

Client setup

Копировать
1// lib/supabase.ts
2import { createClient } from '@supabase/supabase-js';
3
4const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
5const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
6
7export const supabase = createClient(supabaseUrl, supabaseKey);

Authentication

Копировать
1// Sign in
2const { data, error } = await supabase.auth.signInWithPassword({
3  email: 'user@example.com',
4  password: 'password',
5});
6
7// Sign up
8const { data, error } = await supabase.auth.signUp({
9  email: 'user@example.com',
10  password: 'password',
11});

Working with data

Копировать
1// Fetch data
2const { data, error } = await supabase
3  .from('posts')
4  .select('*')
5  .eq('published', true);
6
7// Insert record
8const { data, error } = await supabase
9  .from('posts')
10  .insert({ title: 'New Post', content: '...' });

Takeaways

Supabase gives you a powerful backend without writing your own server. Great for fast product delivery.