Tạo Ứng Dụng Todo App với Supabase và Next.js – Hướng Dẫn Chi Tiết

npx create-next-app@latest todo-app

npm install @supabase/supabase-js
npm install shadcn/ui

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)

Để bảo mật, lưu URL và key vào file .env.local. Tiếp theo, tạo một trang todo tại app/todos/page.js:

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

export default function TodosPage() {
  const [todos, setTodos] = useState([])
  const [title, setTitle] = useState('')

useEffect(() => {
    fetchTodos()
    const subscription = supabase
      .from('todos')
      .on('*', (payload) => fetchTodos())
      .subscribe()
    return () => supabase.removeSubscription(subscription)
  }, [])

async function fetchTodos() {
    const { data, error } = await supabase.from('todos').select('*')
    if (error) console.error(error)
    else setTodos(data || [])
  }

async function addTodo() {
    if (!title.trim()) return
    const { error } = await supabase.from('todos').insert([{ title, is_completed: false }])
    if (error) console.error(error)
    setTitle('')
  }

async function toggleTodo(id, isCompleted) {
    await supabase.from('todos').update({ is_completed: !isCompleted }).eq('id', id)
  }

return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Todo App</h1>
      <div className="flex mb-4">
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Nhập công việc mới..."
          className="flex-1 px-3 py-2 border rounded-l-lg"
        />
        <button onClick={addTodo} className="px-4 py-2 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600">
          Thêm
        </button>
      </div>
      <ul className="space-y-2">
        {todos.map((todo) => (
          <li key={todo.id} className="flex items-center justify-between">
            <div className="flex items-center">
              <input
                type="checkbox"
                checked={todo.is_completed}
                onChange={() => toggleTodo(todo.id, todo.is_completed)}
                className="mr-2"
              />
              <span className={todo.is_completed ? 'line-through text-gray-400' : ''}>
                {todo.title}
              </span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

Đoạn code trên minh họa cách kết nối với Supabase, lắng nghe thay đổi dữ liệu theo thời gian thực, và cập nhật giao diện ngay lập tức. Việc sử dụng useEffect và subscription giúp ứng dụng luôn đồng bộ với cơ sở dữ liệu.

Nâng cao với xác thực người dùng

Để ứng dụng thực tế hơn, bạn có thể thêm tính năng xác thực người dùng. Supabase cung cấp sẵn UI components cho đăng ký và đăng nhập. Thêm một trang auth và bảo vệ trang todo bằng cách kiểm tra session người dùng. Khi người dùng đăng nhập, lưu trữ user.id cùng với mỗi todo, giúp phân biệt công việc của từng người.

Kết luận

Qua bài hướng dẫn này, bạn đã xây dựng được một ứng dụng todo app hoàn chỉnh, sử dụng Supabase cho backend và Next.js cho frontend. Supabase giúp bạn tiết kiệm thời gian với cơ sở dữ liệu, API tự động, và xác thực tích hợp, trong khi Next.js mang lại trải nghiệm người dùng mượt mà và SEO tốt. Bạn có thể mở rộng ứng dụng bằng cách thêm tính năng chỉnh sửa, xóa công việc, hoặc phân loại theo dự án. Hy vọng bài viết này giúp bạn tự tin hơn khi bắt tay vào các dự án thực tế với Supabase và Next.js.