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

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

npm install @supabase/supabase-js

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ẻ!