Frontend
Nâng Cấp Blog Next.js + Notion: Thêm Dark Mode, Highlight Code và Đọc Nội Dung Mượt Mà Trong 15 Phút
Hướng dẫn chi tiết cách nâng cấp blog Next.js Notion API với Dark Mode mượt mà, định dạng Markdown đẹp mắt và Syntax Highlighting cho đoạn mã code chỉ trong 15 phút.
Shan DevCập nhật 5 phút đọcĐang tải lượt xemNext.js
Notion
UI/UX
Nâng Cấp Blog Next.js + Notion: Thêm Dark Mode, Highlight Code và Đọc Nội Dung Mượt Mà Trong 15 Phút
Bạn đã dựng xong trang chủ hiển thị danh sách bài viết từ Notion theo hướng dẫn ở bài trước? Chúc mừng bạn! Nhưng khi nhấp vào xem chi tiết bài viết, giao diện nhìn vẫn "thô sơ", đoạn code đen xì không có màu sắc, lại còn thiếu tính năng Dark Mode thời thượng để "cứu rỗi" đôi mắt của dân dev khi đọc đêm?
Đừng lo! Bài viết này sẽ hướng dẫn bạn hô biến giao diện đọc bài trên Next.js thành một phiên bản chuẩn UX/UI, cực mượt và vô cùng chuyên nghiệp chỉ trong vài nốt nhạc.
Bộ công cụ chúng ta sẽ dùng gồm những gì?
Để xử lý đống dữ liệu "loằng ngoằng" từ Notion API trả về, chúng ta sẽ kết hợp bộ 3 công cụ siêu nhẹ sau:
- notion-to-md: Thư viện giúp chuyển đổi các Block của Notion sang định dạng Markdown chuẩn.
- react-markdown & react-syntax-highlighter: Bộ đôi giúp render Markdown ra HTML và tô màu code (Syntax Highlighting) mượt mà.
- next-themes & Tailwind CSS: Giúp tích hợp tính năng chuyển đổi giao diện Sáng/Tối (Dark/Light Mode) mượt mà không bị giật màn hình (Flicker).
