Trong những bài trước, chúng ta đã tìm hiểu các khái niệm cơ bản của React và Next.js. Ở bài này, chúng ta sẽ kết hợp những kiến thức đó để xây dựng một website lịch sử đơn giản, lấy ví dụ về các vị hoàng đế nhà Đường. Mục tiêu không chỉ là tạo một trang hiển thị thông tin, mà còn hiểu cách phát triển từ một trang HTML tĩnh thành một hệ thống có thể lấy nội dung từ CMS và render bằng các React Components. Chúng ta sẽ đi qua các bước: Tạo một trang Next.js tĩnh với Bootstrap. Tách giao diện thành các React Components. Sử dụng dynamic route để xử lý nhiều URL. Lấy nội dung từ một CMS API. Tạo ContentRenderer để ánh xạ nội dung CMS sang React Components. Hiểu luồng render từ CMS đến HTML hiển thị trên trình duyệt. Lưu ý: Các tên như contentHtml , ContentRenderer và CmsPageTemplate trong bài là tên do chúng ta tự đặt để minh họa. Đây không phải API có sẵn của Next.js, React hay Umbraco. JSON của CMS cũng là ví dụ về một API contract do chúng ta thiết kế, khôn...
Trong Day 5, chúng ta đã tìm hiểu cách sử dụng Language Variants trong Umbraco 13 để quản lý bài viết Lý Tự Nghiệp (李嗣業) bằng tiếng Việt và tiếng Anh. Với nội dung CMS, Umbraco đã cung cấp sẵn cơ chế quản lý phiên bản ngôn ngữ. Tuy nhiên, trong một ứng dụng thực tế, chúng ta còn có nhiều dữ liệu nghiệp vụ khác như danh mục sản phẩm, tên sản phẩm, mô tả, cấu hình hoặc thông tin do backend quản lý. Ví dụ, Bookstore có thể cần các danh mục sau: Lịch sử — History. Triết học — Philosophy. Thay vì tạo hai danh mục riêng biệt cho hai ngôn ngữ, chúng ta muốn lưu một danh mục duy nhất và quản lý tên của nó theo từng ngôn ngữ. Trong bài này, chúng ta sẽ thiết kế một mô hình database đa ngôn ngữ đơn giản bằng SQL Server và ASP.NET Core Web API. Mô hình có bảng Languages để quản lý ngôn ngữ, bảng Categories để lưu dữ liệu nghiệp vụ và bảng CategoryTranslations để lưu nội dung đã dịch. Chúng ta cũng sẽ bổ sung trạng thái enable/disable cho ngôn ngữ, xây dựng API trả về danh mục t...