Интеграция Supabase в Next.js

Supabase — отличная альтернатива Firebase с открытым исходным кодом.

Установка

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

Настройка клиента

Копировать
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);

Аутентификация

Копировать
1// Вход
2const { data, error } = await supabase.auth.signInWithPassword({
3  email: 'user@example.com',
4  password: 'password',
5});
6
7// Регистрация
8const { data, error } = await supabase.auth.signUp({
9  email: 'user@example.com',
10  password: 'password',
11});

Работа с данными

Копировать
1// Получение данных
2const { data, error } = await supabase
3  .from('posts')
4  .select('*')
5  .eq('published', true);
6
7// Создание записи
8const { data, error } = await supabase
9  .from('posts')
10  .insert({ title: 'New Post', content: '...' });

Выводы

Supabase предоставляет мощный backend без необходимости писать серверный код. Идеально для быстрой разработки.