Series Chinh phục Vercel | Bài 3: Next.js & Dashboard - "Trung tâm chỉ huy" cho hệ thống Metro

Tại sao lại là Next.js? Vì nó là "đứa con cưng" của Vercel. Next.js không chỉ là một Frontend Framework, nó là một Full-stack framework. Nó cho phép bạn vừa viết giao diện (React), vừa viết API (Serverless Functions) ngay trong cùng một dự án.

1. Khởi tạo dự án Next.js

Hãy gỡ bỏ các project test cũ, chúng ta bắt đầu một dự án Dashboard chuyên nghiệp:

npx create-next-app@latest afc-metro-dashboard --typescript --tailwind --eslint
# Chọn Yes cho các tùy chọn mặc định (App Router, src/ directory, etc.)
cd afc-metro-dashboard

2. Kiến trúc Dashboard "Sát thủ"

Trong một hệ thống Metro, chúng ta cần 2 phần chính:

• Server Components (Backend): Lấy dữ liệu giao dịch từ Database Postgres.
• Client Components (Frontend): Hiển thị biểu đồ theo thời gian thực (Real-time).

Ví dụ: Lấy dữ liệu từ DB và hiển thị trên Dashboard Tại file src/app/page.tsx:

import { Pool } from 'pg';

// Hàm lấy dữ liệu (Server Side - Chạy trực tiếp trên server Vercel)
async function getStationData() {
  const pool = new Pool({ connectionString: process.env.DATABASE_URL });
  const { rows } = await pool.query('SELECT station_name, traffic_count FROM station_stats');
  return rows;
}

export default async function Dashboard() {
  const data = await getStationData();

  return (
    <main className="p-10">
      <h1 className="text-2xl font-bold">Trung tâm giám sát Metro - Hệ thống AFC</h1>
      <div className="grid grid-cols-3 gap-4 mt-6">
        {data.map((station) => (
          <div key={station.station_name} className="p-6 border rounded shadow-lg">
            <h2 className="font-semibold">{station.station_name}</h2>
            <p className="text-4xl">{station.traffic_count} khách</p>
          </div>
        ))}
      </div>
    </main>
  );
}

3. Bí mật của "Caching" - Tại sao Vercel lại nhanh?

Nếu bạn query Database mỗi khi người dùng F5, Database sẽ sập ngay lập tức. Vercel cho phép bạn cache kết quả. Trong Next.js (App Router), bạn chỉ cần thêm một dòng:

// Cache dữ liệu trong 60 giây. Mọi request trong 60s tới sẽ dùng kết quả cũ, Database không bị đụng đến.
export const revalidate = 60;

Đây là cách các kỹ sư hệ thống làm cho Dashboard trở nên cực nhanh mà không cần tốn tài nguyên server.

4. Deploy Dashboard lên Vercel

Sau khi code xong, đẩy lên Bitbucket/GitHub rồi nhấn Deploy trên Vercel.

• Hệ thống sẽ tự động build file HTML cho bạn.
• process.env.DATABASE_URL sẽ được lấy từ Config Vars của Vercel (như đã thiết lập ở Bài 2).
• Bạn có ngay một Dashboard chạy https://afc-metro-dashboard.vercel.app bảo mật và siêu tốc.

5. Mẹo "Pro" cho kỹ sư hệ thống (Server-side rendering)

Khi làm Dashboard cho Metro, bạn cần dữ liệu luôn "tươi mới". Hãy kết hợp SWR (thư viện của chính Vercel làm ra):

• Server Side: Load lần đầu để khách không thấy màn hình trắng.
• Client Side (SWR): Sau khi trang tải xong, trình duyệt sẽ tự động gọi API ngầm sau mỗi 5 giây để cập nhật số lượng khách mà không cần load lại cả trang.

đến đây bạn đã có một bộ khung hoàn chỉnh: API (Vercel) + Database (Heroku Postgres) + Dashboard (Next.js). Đây chính là kiến trúc của các hệ thống Modern Web hiện đại.