Next.js + Sanity: Stack mới của Riverssea và bước chuyển mình khỏi WordPress

by Khanh Do

Stack Next.js va Sanity cho web development hien dai
Đăng ngày
Thời gian đọc6 phút đọc

Gần năm năm trước, gần như mọi dự án web của chúng tôi đều dựng trên WordPress. Plugin sẵn có, theme đẹp, khách hàng quen thuộc với giao diện admin, và team chỉ cần tập trung vào nội dung. Nhưng khi yêu cầu của khách hàng phức tạp hơn (web app tương tác, dashboard nội bộ, tích hợp API, content đa kênh), WordPress bắt đầu để lộ giới hạn.

Hôm nay, stack mặc định cho mọi dự án web nghiêm túc của Riverssea là Next.js cho frontend và Sanity cho content. WordPress vẫn còn vai trò, nhưng đã thu hẹp về một phân khúc cụ thể: các dự án web bán hàng đơn giản, nơi tốc độ ra mắt và chi phí ban đầu quan trọng hơn khả năng mở rộng dài hạn.

Next.js: nền tảng web app thật sự, không chỉ là static site

Next.js: nền tảng web app thống nhất cho marketing, dashboard và API
Next.js gom marketing, dashboard và API endpoint vào cùng một codebase.

Next.js không phải framework chỉ để làm landing page. Sức mạnh thật sự nằm ở việc cùng một codebase có thể vận hành cả trang marketing tĩnh, web app tương tác, và API endpoint. App Router mở ra mô hình React Server Components, cho phép render dữ liệu trực tiếp ở phía server mà không cần REST hay GraphQL trung gian.

Với các dự án doanh nghiệp có khối lượng xử lý lớn, Next.js đặc biệt mạnh khi tích hợp với backend Go. Go đảm nhận business logic nặng (xử lý đơn hàng, queue background, real-time event), còn Next.js gọi qua API. Cấu trúc tách rời này cho phép scale từng phần độc lập: frontend chạy trên Vercel hoặc Dokploy, backend Go chạy trên VPS hoặc Kubernetes cluster. Khi cần thêm mobile app, chính API đó phục vụ luôn iOS và Android, không phải build lại.

Đây là điểm WordPress không thể chạm tới. Kiến trúc PHP monolith của WordPress không thiết kế để phục vụ song song nhiều client (web, mobile, kiosk, dashboard). Mọi nỗ lực biến WordPress thành headless API (qua REST API hay WPGraphQL) đều có cảm giác như ép một con voi chui qua lỗ kim.

Sanity: CMS chuyên nghiệp cho team nội dung

Sanity: structured content với multi-editor và Visual Editing
Sanity tách content khỏi presentation, hỗ trợ nhiều editor cùng làm việc trên một document.

Sanity không cố trở thành WordPress. Triết lý của nó là structured content: nội dung được định nghĩa bằng schema rõ ràng, không phải HTML rời rạc trong textarea. Mỗi field có type, validation, và preview riêng. Khi schema thay đổi, dữ liệu cũ vẫn nguyên vẹn vì Sanity tách rời content khỏi presentation.

Điểm chúng tôi đánh giá cao nhất là khả năng multi-editor. Hai biên tập viên có thể chỉnh sửa cùng một document cùng lúc mà không ghi đè nhau, giống Google Docs nhưng cho nội dung có cấu trúc. Với khách hàng có team marketing nhiều người, đây là tính năng không có lựa chọn thay thế trong WordPress hay các CMS truyền thống. WordPress khoá document khi có ai đang edit, dẫn đến tình huống một người mở tab quên đóng làm cả team không vào được.

Tính năng Visual Editing cho phép biên tập viên click vào bất kỳ phần tử nào trên trang preview và mở thẳng field tương ứng để chỉnh sửa. Trải nghiệm này khép kín vòng tròn: nội dung, layout, preview, publish, tất cả trong một quy trình thống nhất. Khách hàng của chúng tôi onboard nhanh hơn nhiều so với WordPress admin truyền thống.

Ưu điểm thực tế của stack Next.js + Sanity

[@portabletext/react] Unknown block type "span", specify a component for it in the `components.types` prop Với Next.js standalone output và Sanity CDN, page load thường dưới 1 giây. Core Web Vitals đạt mức Good mà không cần tối ưu thêm. So với một site WordPress trung bình có 20 plugin, performance gap thường gấp 3 đến 5 lần.

[@portabletext/react] Unknown block type "span", specify a component for it in the `components.types` prop Không có wp-admin để bị brute force, không có plugin của bên thứ ba để bị khai thác lỗ hổng. Surface area nhỏ hơn WordPress rất nhiều, và phần lớn rủi ro bảo mật chuyển sang Sanity (do Sanity Inc. quản lý) thay vì rơi vào team dev.

[@portabletext/react] Unknown block type "span", specify a component for it in the `components.types` prop Sanity tự generate TypeScript types từ schema. Frontend viết query GROQ, nhận về object có type chính xác, IDE auto-complete, lỗi runtime giảm đáng kể. Refactor schema không còn là canh bạc may rủi.

[@portabletext/react] Unknown block type "span", specify a component for it in the `components.types` prop Khi cần thêm app mới (mobile, dashboard nội bộ, kiosk tại showroom), cùng một Sanity dataset phục vụ tất cả qua API. Headless architecture không bị khoá vào một frontend duy nhất, khác với WordPress vốn coi web là first-class citizen còn các kênh khác là phụ trợ.

[@portabletext/react] Unknown block type "span", specify a component for it in the `components.types` prop Sanity tier miễn phí đủ cho hầu hết dự án vừa. Vercel hoặc Dokploy chi phí ổn định. Không có license plugin trả phí hàng năm như khi dùng WordPress chuyên nghiệp (LearnDash, ACF Pro, WPML, Yoast Premium cộng lại có thể vượt 1.000 USD mỗi năm cho một site).

WordPress vẫn còn vai trò

Chúng tôi không nói WordPress đã lỗi thời. Với landing page bán một sản phẩm cụ thể, web 5 trang giới thiệu công ty nhỏ, hoặc shop e-commerce dưới 200 SKU, WordPress kết hợp WooCommerce vẫn là lựa chọn nhanh nhất. Khách hàng có thể tự cập nhật, hosting rẻ, ecosystem theme và plugin khổng lồ với hàng chục nghìn lựa chọn.

Vấn đề bắt đầu khi dự án vượt qua ngưỡng đó: nhiều editor làm việc song song, content đa ngôn ngữ, tích hợp API phức tạp, hoặc cần app mobile dùng chung dữ liệu. Ở quy mô này, chi phí maintain WordPress (plugin conflict, security update khẩn cấp, performance tuning thủ công) vượt qua chi phí build mới trên stack hiện đại. Tại Riverssea, ranh giới này thường rơi vào khoảng dự án trên 50 triệu đồng và có yêu cầu mở rộng dài hạn.

Quan điểm về AI trong quy trình làm việc

AI hỗ trợ workflow lập trình, không thay thế quy trình
AI là công cụ tăng tốc, mọi output vẫn qua review của con người.

AI đã thay đổi cách Riverssea làm việc trong năm qua. Code assistant viết boilerplate, AI tạo first draft nội dung, image generator tạo cover image cho blog, copilot suggest GROQ query. Tốc độ output của team tăng đáng kể, đặc biệt ở các tác vụ lặp lại.

Nhưng AI không thay thế quy trình. Quan điểm của chúng tôi rất rõ ràng: dùng AI để tăng tốc, không phải để hạ tiêu chuẩn. Code do AI gợi ý vẫn phải qua code review, content do AI viết vẫn phải qua biên tập, design do AI render vẫn phải có art director duyệt. Khi AI tiết kiệm cho team vài giờ, chúng tôi dùng thời gian đó để làm phần khó hơn (architecture sâu, UX research, kiểm tra chất lượng kỹ hơn) chứ không phải để hạ giá thành sản phẩm.

[@portabletext/react] Unknown block type "span", specify a component for it in the `components.types` prop Đó là cam kết của Riverssea với khách hàng và với chính team mình. AI là công cụ giúp đạt tiêu chuẩn cao hơn nhanh hơn, không phải lý do để hạ thấp tiêu chuẩn. Một sản phẩm web năm 2026 không thể có cùng mức chất lượng như sản phẩm năm 2020, dù chi phí thực tế của khách hàng có thể không tăng tương ứng.

Danh mục