Integrating Supabase Backend

Sau khi đã triển khai Supabase Open Source trên server, bước tiếp theo là kết nối ứng dụng Next.js của bạn với bộ máy Backend này để xử lý dữ liệu và người dùng.

1. Cấu hình Môi trường

Để Next.js có thể giao tiếp với Supabase, bạn cần cung cấp URL và Anon Key thông qua biến môi trường.

Good Practice: Environment Variables

env:

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-supabase-domain.com
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key # Chỉ dùng ở phía Server

2. Supabase Client Strategy

Bad Practice: Khởi tạo Client ở mọi nơi

Việc gọi createClient liên tục trong các component sẽ làm lãng phí tài nguyên và khó quản lý cấu hình.

Good Practice: Singleton Client Pattern

Chúng ta khởi tạo một instance duy nhất trong src/lib/supabase.ts:

tsx:

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

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

3. Lựa chọn Data Fetching

Option A: Supabase Client (Thẳng vào DB)

Dùng cho các ứng dụng cần Realtime hoặc khi bạn muốn tận dụng Row Level Security (RLS).

tsx:

const { data, error } = await supabase
  .from('lessons')
  .select('*')
  .eq('category', 'infrastructure');

Option B: Prisma (Connect qua Postgres)

Dùng khi bạn đã có sẵn bộ Prisma hoặc cần quản lý quan hệ bảng phức tạp (Relations). Supabase cung cấp Connection String để bạn điền vào DATABASE_URL.

prisma:

// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL") // URL từ Supabase Dashboard
}

4. Authentication Integration

Nếu bạn đang dùng NextAuth (Auth.js), bạn có thể dùng Supabase Adapter để lưu thông tin người dùng trực tiếp vào bảng users của Supabase thay vì một DB riêng.

Good Practice: Middleware Protection

Luôn sử dụng Middleware để kiểm tra session trước khi cho phép người dùng truy cập các trang nhạy cảm (như Profile, Dashboard).

Tổng kết "Failure to Feature"

Thất bại lớn nhất khi tích hợp Backend là để lộ SERVICE_ROLE_KEY ở phía Client (biến không có tiền tố NEXT_PUBLIC_). Bằng cách tuân thủ nguyên tắc Server-side fetching và sử dụng Singleton Client, bạn xây dựng một cầu nối vững chắc, an toàn giữa mã nguồn Document và hạ tầng Supabase của riêng mình.

Bài trước

Server Hardening: Production Standards

Bài tiếp theo

Self-hosting Supabase: Docker Deployment