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

Nếu bạn đã từng xây dựng một ứng dụng web hoàn chỉnh, hẳn bạn biết rằng việc kết hợp nhiều công nghệ khác nhau — backend, database, authentication, frontend — có thể nhanh chóng trở nên phức tạp. Tuy nhiên, với sự kết hợp giữa Supabase và Next.js, bạn có thể tạo ra một ứng dụng full-stack mạnh mẽ chỉ bằng một framework duy nhất. Bài viết này sẽ khám phá cách Supabase và Next.js hoạt động cùng nhau để đơn giản hóa quá trình phát triển web.

Supabase là gì?

Supabase là một nền tảng backend-as-a-service (BaaS) mã nguồn mở, cung cấp cho bạn một database PostgreSQL đầy đủ chức năng, authentication, real-time subscriptions, file storage, và serverless functions. Điểm mạnh của Supabase nằm ở khả năng tích hợp liền mạch với các framework frontend hiện đại, đặc biệt là Next.js.

Next.js: Framework React toàn diện

Next.js là một framework React phổ biến, được biết đến với khả năng hỗ trợ server-side rendering (SSR), static site generation (SSG), routing, API routes, và nhiều tính năng khác. Với Next.js, bạn có thể xây dựng cả frontend và backend trong cùng một dự án, giúp tối ưu hóa hiệu suất và trải nghiệm người dùng.

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

Khi kết hợp Supabase và Next.js, bạn sẽ có một stack hoàn chỉnh để phát triển ứng dụng web:

- Database: Supabase cung cấp PostgreSQL với giao diện quản lý trực quan. - Authentication: Hỗ trợ đăng nhập bằng email/password, OAuth, và nhiều nhà cung cấp khác. - Authorization: Row Level Security (RLS) giúp bảo mật dữ liệu. - Real-time: Cập nhật dữ liệu theo thời gian thực mà không cần reload trang. - File Storage: Upload và quản lý file dễ dàng. - API Routes: Next.js cho phép bạn viết API endpoints trong cùng dự án.

Xây dựng ứng dụng mẫu

Để minh họa, chúng ta sẽ tạo một ứng dụng đơn giản để quản lý công việc (todo app) với authentication và real-time updates.

Bước 1: Khởi tạo dự án Next.js

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

Bước 2: Cài đặt Supabase

npm install @supabase/supabase-js

Bước 3: Thiết lập Supabase

Đăng nhập vào Supabase, tạo một project mới, và lấy URL và anon public key từ phần Settings > API. Lưu chúng vào .env.local:

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 }
}

Quảng cáo

300x250 In-Content Advertisement

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!

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