Xây dựng ứng dụng e-commerce với Supabase và Next.js: Hướng dẫn chi tiết

Giới thiệu

Trong bối cảnh thương mại điện tử ngày càng phát triển, việc xây dựng một ứng dụng e-commerce hiện đại đòi hỏi sự kết hợp giữa công nghệ backend mạnh mẽ và frontend linh hoạt. Supabase – một nền tảng Backend-as-a-Service (BaaS) mã nguồn mở – cùng với Next.js – framework React phổ biến – tạo thành bộ đôi hoàn hảo cho việc phát triển nhanh chóng và hiệu quả. Bài viết này sẽ hướng dẫn chi tiết cách xây dựng một ứng dụng e-commerce từ đầu, giúp bạn hiểu rõ từng bước và áp dụng ngay vào dự án thực tế.

Chuẩn bị môi trường và công cụ

Trước khi bắt đầu, cần đảm bảo môi trường phát triển đã sẵn sàng. Supabase cung cấp database PostgreSQL, authentication, real-time updates và file storage, trong khi Next.js hỗ trợ server-side rendering và static site generation. Cài đặt Node.js và npm/yarn, sau đó khởi tạo dự án Next.js với lệnh npx create-next-app@latest. Tiếp theo, tạo một project mới trên Supabase Dashboard, lưu lại URL và service key để kết nối.

Thiết lập database và authentication

Database là nền tảng lưu trữ dữ liệu sản phẩm, người dùng và đơn hàng. Trong Supabase, tạo các bảng như products, users, orders, categories với các field phù hợp (id, name, price, description, image_url…). Sử dụng Supabase UI để định nghĩa relation và constraint, đảm bảo dữ liệu nhất quán. Authentication được kích hoạt sẵn, cho phép đăng ký và đăng nhập người dùng qua email/password hoặc OAuth. Tích hợp client Supabase vào Next.js qua supabase-js để gọi API từ frontend.

Xây dựng backend với API routes

Next.js cho phép tạo API routes trong thư mục app/api/. Tại đây, định nghĩa các endpoint như GET /api/products để lấy danh sách sản phẩm, POST /api/orders để tạo đơn hàng, và PUT /api/products/:id để cập nhật sản phẩm. Mỗi route sẽ gọi tới Supabase client để truy vấn database. Ví dụ, để lấy sản phẩm:

import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
const supabase = createClient(supabaseUrl, supabaseAnonKey);

export async function GET() {
  const { data, error } = await supabase
    .from('products')
    .select('*');
  return NextResponse.json(data);
}