Hướng Dẫn Tích Hợp Supabase Với Next.js Cho Người Mới Bắt Đầu

Tại sao nên kết hợp Supabase và Next.js?

Trong thế giới phát triển ứng dụng web hiện đại, việc chọn đúng stack công nghệ là yếu tố then chốt quyết định tốc độ và hiệu quả của dự án. Supabase, với vai trò là một nền tảng Backend-as-a-Service mã nguồn mở, cung cấp đầy đủ các tính năng như cơ sở dữ liệu PostgreSQL, xác thực người dùng, lưu trữ file, và API tự động — tất cả trong một nơi. Khi kết hợp với Next.js, framework React phổ biến nhất hiện nay, bạn sẽ có một bộ đôi hoàn hảo giúp tiết kiệm thời gian và tối ưu hiệu năng.

Chuẩn bị môi trường phát triển

Trước khi bắt đầu, bạn cần đảm bảo đã cài đặt Node.js (phiên bản 16 trở lên) và npm hoặc yarn trên máy. Tiếp theo, đăng ký một tài khoản miễn phí tại Supabase. Sau khi đăng nhập, tạo một project mới và lưu lại URL project cùng khóa API — đây sẽ là thông tin quan trọng để kết nối ứng dụng của bạn với Supabase.

Khởi tạo dự án Next.js

Mở terminal và chạy lệnh:

npx create-next-app@latest my-supabase-app
cd my-supabase-app

Chọn các tùy chọn mặc định hoặc tùy chỉnh theo nhu cầu. Sau khi hoàn tất, bạn đã có một dự án Next.js sẵn sàng để phát triển.

Cài đặt Supabase vào dự án

Để kết nối Next.js với Supabase, bạn cần cài đặt thư viện chính thức:

npm install @supabase/supabase-js

Thiết lập kết nối Supabase

Tạo một file lib/supabase.js trong thư mục dự án với nội dung:

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 ý: Bạn cần thêm hai biến môi trường này vào file .env.local ở thư mục gốc:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_anon_key

Tạo bảng dữ liệu mẫu

Truy cập dashboard Supabase, vào tab Table Editor, tạo một bảng đơn giản như posts với các cột: id, title, content, created_at. Điều này giúp bạn có dữ liệu để thao tác trong ứng dụng demo.

Xây dựng trang quản lý bài viết

Mở file app/page.js và thay thế nội dung bằng:

import { useState, useEffect } from 'react'
import { supabase } from '@/lib/supabase'

export default function Home() {
  const [posts, setPosts] = useState([])
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')


useEffect(() => {
    fetchPosts()
    const interval = setInterval(fetchPosts, 1000)
    return () => clearInterval(interval)
  }, [])


async function fetchPosts() {
    const { data, error } = await supabase
      .from('posts')
      .select('*')
    if (error) console.log(error)
    else setPosts(data)
  }


async function addPost() {
    if (!title || !content) return
    const { error } = await supabase
      .from('posts')
      .insert([{ title, content }])
    if (error) console.log(error)
    else {
      setTitle('')
      setContent('')
      fetchPosts()
    }
  }


return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-8">Quản lý bài viết</h1>
      <div className="mb-8">
        <input
          className="border rounded mr-2 p-2"
          placeholder="Tiêu đề"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <input
          className="border rounded mr-2 p-2"
          placeholder="Nội dung"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />
        <button onClick={addPost} className="bg-blue-500 text-white px-4 py-2 rounded">
          Thêm bài viết
        </button>
      </div>
      <ul>
        {posts.map((post) => (
          <li key={post.id} className="border p-4 mb-2">
            <h3 className="font-semibold">{post.title}</h3>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

Thêm tính năng xóa bài viết

Mở rộng chức năng bằng cách cho phép xóa bài viết:

async function deletePost(id) {
  const { error } = await supabase
    .from('posts')
    .delete()
    .eq('id', id)
  if (error) console.log(error)
  else fetchPosts()
}

Và cập nhật phần render:

<button onClick={() => deletePost(post.id)} className="bg-red-500 text-white px-2 py-1 rounded text-sm">
  Xóa
</button>

Kết luận và hướng phát triển tiếp theo

Bạn đã xây dựng thành công một ứng dụng quản lý bài viết đơn giản nhưng hoàn chỉnh, tích hợp Supabase với Next.js. Với những kiến thức cơ bản này, bạn có thể mở rộng dự án bằng cách thêm tính năng xác thực người dùng, upload file, hoặc real-time updates. Supabase còn cung cấp nhiều công cụ mạnh mẽ khác như Row Level Security (RLS) để bảo mật dữ liệu, Edge Functions để chạy code trên CDN, và Storage để quản lý file — tất cả đều dễ dàng tích hợp với Next.js.

Hy vọng hướng dẫn này giúp bạn tự tin bắt tay vào xây dựng ứng dụng thực tế. Chúc bạn code vui vẻ!