Supabase và Next.js: Full-stack web app chỉ với một framework

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

npm install @supabase/supabase-js

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Bước 4: Tạo database schema

Trong Supabase dashboard, tạo một table todos với các cột:

– id: UUID (primary key)
– title: text
– is_completed: boolean (default: false)
– created_at: timestamp (default: now())

Bước 5: Viết authentication hook

Tạo file 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)

Tạo file hooks/useAuth.js:

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

export function useAuth() {
  const [user, setUser] = useState(null)

useEffect(() => {
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (event, session) => {
        const currentUser = session?.user
        setUser(currentUser)
      }
    )
    return () => subscription.unsubscribe()
  }, [])

return { user, signOut: supabase.auth.signOut }
}

Bước 6: Tạo trang login và dashboard

Trong app/login/page.js:

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

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

const handleLogin = async (e) => {
    e.preventDefault()
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })
    if (error) alert(error.message)
  }

return (
    <form onSubmit={handleLogin}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  )
}

Trong app/dashboard/page.js:

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

export default function DashboardPage() {
  const { user } = useAuth()
  const [todos, setTodos] = useState([])

useEffect(() => {
    fetchTodos()
    const subscription = supabase
      .from('todos')
      .on('INSERT, UPDATE, DELETE', (payload) => fetchTodos())
      .subscribe()

return () => subscription.unsubscribe()
  }, [])

const fetchTodos = async () => {
    const { data, error } = await supabase
      .from('todos')
      .select('*')
      .order('created_at', { ascending: false })
    if (error) console.error(error)
    else setTodos(data)
  }

if (!user) return <div>Loading...</div>

return (
    <div>
      <h1>Welcome, {user.email}</h1>
      <button onClick={() => supabase.auth.signOut()}>Logout</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input type="checkbox" checked={todo.is_completed} />
            <span>{todo.title}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

Bước 7: Bảo mật với Row Level Security (RLS)

Trong Supabase dashboard, enable RLS cho table todos và thêm policies để chỉ cho phép user truy cập vào todos của chính họ.

Kết luận

Việc kết hợp Supabase và Next.js giúp bạn xây dựng ứng dụng full-stack nhanh chóng và hiệu quả. Bạn không cần phải lo lắng về việc cài đặt và quản lý database, authentication, hay real-time features — tất cả đã được tích hợp sẵn. Điều này giúp bạn tập trung vào việc phát triển tính năng và trải nghiệm người dùng.

Dù bạn là developer mới hay đã có kinh nghiệm, stack này mang lại sự linh hoạt và tốc độ phát triển đáng kinh ngạc. Hãy thử nghiệm và khám phá tiềm năng của Supabase và Next.js trong dự án tiếp theo của bạn!