Xây Dựng Ứng Dụng Full-Stack Hoàn Chỉnh Với Supabase và Vercel

npm install @supabase/supabase-js

// lib/supabase.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

import { supabase } from '@/lib/supabase'

// Đăng ký
const { error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'securepassword'
})

// Đăng nhập
const { error: loginError } = await supabase.auth.signInWithPassword({
  email: '[email protected]',
  password: 'securepassword'
})

Supabase sẽ tự động quản lý session và cung cấp hook để lấy thông tin người dùng hiện tại trong React.

Quản lý dữ liệu với Supabase

Với Supabase, bạn có thể thực hiện các thao tác CRUD (Create, Read, Update, Delete) một cách đơn giản:

// Thêm task mới
const { data, error } = await supabase
  .from('tasks')
  .insert([
    { title: 'Học Supabase', description: 'Tìm hiểu về back-end as a service' }
  ])

// Lấy danh sách task
const { data: tasks, error: tasksError } = await supabase
  .from('tasks')
  .select('*')
  .order('created_at', { ascending: false })

Deploy ứng dụng lên Vercel

Sau khi hoàn thiện ứng dụng, bạn có thể deploy lên Vercel một cách dễ dàng. Nếu sử dụng Git, bạn chỉ cần kết nối repository với Vercel và chọn branch để deploy. Vercel sẽ tự động build và deploy ứng dụng.

Để bảo mật thông tin kết nối, bạn nên lưu trữ các biến môi trường (environment variables) trong dashboard của Vercel thay vì hardcode vào code.

Tối ưu hiệu năng và bảo mật

Vercel tự động tối ưu hóa hiệu năng với CDN toàn cầu, lazy loading, và pre-rendering. Supabase cũng cung cấp edge functions giúp bạn chạy code gần người dùng hơn, giảm latency.

Về bảo mật, luôn sử dụng RLS policies để hạn chế truy cập dữ liệu, validate input trên cả client và server, và không bao giờ expose khóa API nhạy cảm trên client-side.

Kết luận

Việc kết hợp Supabase và Vercel giúp bạn xây dựng ứng dụng full-stack nhanh chóng mà không cần quản lý server phức tạp. Supabase lo việc back-end với cơ sở dữ liệu, xác thực, và API, trong khi Vercel đảm nhiệm front-end với deploy nhanh và tối ưu hiệu năng. Đây là bộ đôi hoàn hảo cho các developer muốn tập trung vào trải nghiệm người dùng thay vì lo lắng về infrastructure.