Đã đăng vào khoảng 3 giờ trước 3 phút đọc

Xây dựng hệ thống 50+ Máy Tính Tài Chính với Next.js 16 — Đạt Lighthouse 100/100

Xin chào anh em Viblo! Mình là một developer đã dành vài tháng qua để xây dựng nền tảng Máy Tính Tài Chính — một hệ sinh thái gồm 50+ công cụ tính toán tài chính cá nhân hoàn toàn miễn phí, chạy trên Next.js 16 và đạt Lighthouse 100/100.

Trong bài viết này, mình sẽ chia sẻ kiến trúc kỹ thuật, các bài học về performance optimization, và đặc biệt là cách mình tận dụng Next.js để "bắt trend" ra mắt công cụ thần tốc khi có biến động kinh tế.

Tại sao lại build bộ công cụ này? Ban đầu, mình chỉ định làm vài tool tính thuế và lương Gross/Net. Nhưng đến đầu tháng 3/2026, khi giá xăng dầu đột ngột tăng vọt (RON95 lên hơn 27.000đ/lít) và lạm phát CPI vọt lên 3.35%, mình nhận ra: Giai đoạn bão giá, người Việt rất cần một công cụ tính toán lạm phát thực tế, nhưng các tool online toàn của nước ngoài.

Chỉ trong 48 giờ, mình quyết định phát triển thêm module Tính Lạm Phát và publish bài phân tích để đón đầu lượng traffic tìm kiếm. Kiến trúc tổng quan

📦 asset-pyramid-nextjs/
├── 📂 app/cong-cu/          # 50+ calculator pages (SSR)
├── 📂 features/blog/        # 27 blog posts (TSX components)
├── 📂 components/seo/       # Schema markup, RelatedCalculators
├── 📂 lib/                  # Tax formulas, financial utils
└── 📄 next.config.ts        # Redirects, security headers

Điểm đặc biệt trong kiến trúc:

Blog posts = TSX Components (không dùng MDX)

Thay vì dùng MDX hay CMS, mỗi bài blog là một React component thuần:

typescript
// features/blog/registry.ts
const BLOG_COMPONENTS = {
  'gia-xang-tang-lam-phat-2026': GiaXangTangLamPhat2026,
  'nen-dau-tu-gi-khi-chien-tranh-2026': NenDauTuGiKhiChienTranh2026,
  // ... 27 bài
};

Ưu điểm: Full TypeScript type-safety, embed calculator components trực tiếp trong bài viết, không cần build pipeline riêng cho content.

Financial formulas = Pure functions

Tất cả công thức tính toán đều là pure functions, không side effects:

typescript
// Công thức tính lương Net từ Gross (Luật thuế 5 bậc 2026)
export function calculateNetSalary(gross: number, dependents: number): NetSalaryResult {
  const socialInsurance = Math.min(gross * 0.105, BASE_SALARY * 20 * 0.105);
  const taxableIncome = gross - socialInsurance - PERSONAL_DEDUCTION - (dependents * DEPENDENT_DEDUCTION);
  const tax = calculateProgressiveTax(taxableIncome); // 5 bậc lũy tiến
  return { net: gross - socialInsurance - tax, tax, socialInsurance };
}

Schema markup tự động

Mỗi calculator page tự động generate SoftwareApplication + FAQPage schema thông qua component CalculatorSEOContent , giúp Google hiểu đây là công cụ tương tác, không chỉ là trang nội dung tĩnh.

Performance: Con đường đến 100/100

Kết quả: 100/100 trên cả Performance, Accessibility, Best Practices và SEO.

Ứng dụng thực tế: Bắt trend lạm phát 2026 Khi xung đột Iran đẩy giá dầu vượt 100 USD/thùng, mình đã nhanh chóng viết 2 bài phân tích chuyên sâu:

Chiến Tranh Iran 2026 — Phân tích 5 kênh trú ẩn an toàn, trích dẫn Goldman Sachs & J.P. Morgan. Giá Xăng Tăng 2026 — Lạm Phát Ăn Mòn Tiền Bạn Bao Nhiêu? — Dòng tiền chống lạm phát. Mỗi bài đều nhúng CTA dẫn về các công cụ tính toán liên quan, tạo thành một hệ sinh thái "Content Hub + Calculator Cluster".

Kết luận Nếu anh em đang muốn build một sản phẩm utility website chuẩn SEO, mình khuyên:

Chọn Next.js — SSR cho SEO, client components cho interactivity Viết pure functions — Dễ test, dễ maintain Schema markup — Google yêu structured data Content + Tools — Blog kéo traffic, tools giữ chân user Toàn bộ hệ thống đều miễn phí tại maytinhtaichinh.com. Anh em dùng thử và cho mình feedback nhé!

nextjs Fintech

Mục lục