Supabase Next.js Fullstack Dễ Hơn Bao Giờ Hết

Supabase và Next.js: Sự kết hợp hoàn hảo cho Fullstack hiện đại

Khi bắt đầu xây dựng một ứng dụng web hoàn chỉnh, việc lựa chọn công nghệ phù hợp thường là một trong những thách thức lớn nhất. Bạn cần một giải pháp không chỉ nhanh chóng, dễ sử dụng mà còn đủ mạnh mẽ để phát triển lâu dài. Supabase kết hợp với Next.js đang trở thành một trong những cặp đôi đáng chú ý nhất trong cộng đồng developer hiện nay, mang lại trải nghiệm fullstack liền mạch và hiệu quả.

Supabase là gì và tại sao nên dùng?

Supabase được ví như một "Firebase mã nguồn mở" - cung cấp backend-as-a-service với đầy đủ các tính năng cần thiết: cơ sở dữ liệu PostgreSQL, xác thực người dùng, lưu trữ tệp, API tự động sinh ra, và cả real-time. Điểm mạnh của Supabase nằm ở việc bạn không cần phải tự xây dựng backend từ đầu, tiết kiệm thời gian phát triển đáng kể.

So với các giải pháp truyền thống, Supabase cho phép bạn tập trung vào phần frontend và logic nghiệp vụ, trong khi các tác vụ backend được tự động hóa. Đặc biệt, với Next.js - framework React phổ biến nhất hiện nay - sự kết hợp này tạo nên một hệ sinh thái phát triển vô cùng mạnh mẽ.

Cài đặt và thiết lập ban đầu

Để bắt đầu, bạn cần tạo một project trên Supabase Dashboard. Sau khi đăng ký, bạn sẽ nhận được URL project và khóa API - hai thông tin quan trọng để kết nối với Next.js.

Tiếp theo, trong project Next.js của bạn, cài đặt thư viện Supabase client:

npm install @supabase/supabase-js

Tạo một file lib/supabase.js để khởi tạo client:

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

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


export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Lưu ý: Các biến môi trường cần được lưu trong file .env.local và không được commit lên git.

Xác thực người dùng với Supabase Auth

Một trong những tính năng mạnh mẽ nhất của Supabase là hệ thống xác thực tích hợp sẵn. Bạn có thể dễ dàng thêm chức năng đăng ký, đăng nhập, quên mật khẩu chỉ với vài dòng code.

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

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


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

Supabase còn hỗ trợ OAuth với Google, GitHub, Facebook và nhiều nhà cung cấp khác. Bạn có thể dễ dàng tích hợp chúng thông qua dashboard.

Làm việc với cơ sở dữ liệu PostgreSQL

Supabase tự động tạo API REST cho database của bạn, cho phép truy vấn dữ liệu một cách đơn giản. Bạn có thể tạo bảng, chỉ mục, trigger ngay trên dashboard Supabase.

Ví dụ, truy vấn dữ liệu từ một bảng "posts":

// Lấy tất cả posts
const { data: posts, error } = await supabase
  .from('posts')
  .select('*')

// Thêm một post mới
const { data: newPost, error } = await supabase
  .from('posts')
  .insert({
    title: 'Bài viết mới',
    content: 'Nội dung bài viết'
  })
  .select() // Trả về dữ liệu vừa thêm

Điểm đặc biệt là Supabase hỗ trợ Row Level Security (RLS), cho phép bạn kiểm soát quyền truy cập dữ liệu ở mức hàng. Điều này rất quan trọng cho bảo mật ứng dụng.

Real-time: Cập nhật dữ liệu tức thì

Một trong những tính năng ấn tượng nhất của Supabase là khả năng real-time. Bạn có thể lắng nghe thay đổi trên database và cập nhật UI ngay lập tức.

// Lắng nghe thay đổi trên bảng posts
const mySubscription = supabase
  .from('posts')
  .on('*', (payload) => {
    console.log('Thay đổi:', payload)
    // Cập nhật state hoặc re-fetch dữ liệu
  })
  .subscribe()

Tính năng này rất hữu ích cho các ứng dụng chat, bảng điều khiển, hoặc bất kỳ nơi nào cần cập nhật tức thì.

Tối ưu cho Next.js: SSR và SSG

Khi làm việc với Next.js, bạn cần lưu ý về Server-Side Rendering (SSR) và Static Site Generation (SSG). Supabase client không thể sử dụng trực tiếp trong getServerSideProps hoặc getStaticProps vì nó yêu cầu window object.

Giải pháp là sử dụng Supabase REST API trực tiếp hoặc tạo một API route trong Next.js:

// pages/api/posts.js
import { createClient } from '@supabase/supabase-js'
import { supabaseUrl, supabaseAnonKey } from '@/lib/supabase'

export default async function handler(req, res) {
  const supabase = createClient(supabaseUrl, supabaseAnonKey)
  const { data, error } = await supabase
    .from('posts')
    .select('*')


res.status(200).json(data)
}

Quản lý tệp tin với Supabase Storage

Supabase Storage cho phép bạn lưu trữ và quản lý file một cách dễ dàng. Bạn có thể tạo thư mục, upload file, và kiểm soát quyền truy cập.

// Upload file
const { data, error } = await supabase.storage
  .from('avatars')
  .upload('user123.png', file, {
    contentType: 'image/png'
  })

Kết luận và lời khuyên thực tế

Việc tích hợp Supabase với Next.js thực sự đã làm cho việc phát triển fullstack trở nên dễ dàng hơn bao giờ hết. Bạn không cần phải lo lắng về việc tự xây dựng backend, database, hay hệ thống xác thực. Tất cả đã được đóng gói sẵn và sẵn sàng sử dụng.

Tuy nhiên, cần lưu ý một số điểm:

- Bảo mật: Luôn sử dụng Row Level Security để bảo vệ dữ liệu - Performance: Cân nhắc khi sử dụng real-time cho các bảng lớn - Cost: Supabase có giới hạn free tier, cần theo dõi usage khi ứng dụng phát triển

Với những dự án vừa và nhỏ, startup, hoặc khi bạn cần prototype nhanh, Supabase + Next.js là sự lựa chọn tuyệt vời. Bạn sẽ tiết kiệm được hàng tuần, thậm chí hàng tháng so với việc tự xây dựng backend truyền thống.

Bạn đã sẵn sàng thử nghiệm? Hãy bắt đầu với Supabase dashboard và xây dựng ứng dụng Next.js của bạn ngay hôm nay!