Trong bài viết này chúng ta sẽ cùng xây dựng một blog nhanh nhất cho riêng mình với NextJs và Notion

I. Prerequisites

Notion chắc hẳn không còn xa lạ với mọi người, đây là một AI-powered workspace giúp người dùng có thể dễ dàng lên kế hoạch, ghi chú và liên kết với nhiều ứng dụng khác rất tiện lợi.

Về mặt ý tưởng, chúng ta sẽ sử dụng notion như một CMS giúp quản lý thông tin bài viết và NextJs để hiển thị thông tin đó cho user cũng như tận dụng SSR cho việc cải thiện SEO, security...

• Kiến thức về NextJs
• Tài khoản Notion cá nhân

II. Tạo database và access token ở Notion

1. Chọn một page ở Notion dùng để lưu trữ database
2. Thêm phần tử mới và chọn Database - Full page
3. Tạo các field cho database, bao gồm loại và mục đích như sau (các field dùng cho việc demo, các bạn có thể thay đổi sau):

• Title: field được tạo sẵn, mặc định là Name, các bạn chuyển thành Title nhé
• Tags (Multi-select): thẻ chủ đề
• Description (Text): Mô tả ngắn cho bài viết
• PresentativeMedia (Files & media): Để lưu ảnh đại diện cho bài viết
• Slug (Text): dùng làm đường dẫn cho bài viết
• Status (Status): trạng thái bài viết, bao gồm Draft, Published

4. Tiếp theo, các bạn truy cập notion-integration để tạo secret token liên kết với Notion cá nhân mình dùng để tạo database phía trên nhé. Lưu ý chỉ cần chọn quyền đọc: Read content, như hình bên dưới:
5. Sau khi tạo notion-integration, bước tiếp theo cần cho phép integration này có thể truy cập database. Ở mục Connect to, chọn integration vừa tạo (mình vừa tạo for-show-sample), như hình dưới:

III. Tạo database mẫu

• Dựa vào cấu trúc database đã tạo, chúng ta sẽ tạo một vài record mẫu như sau. Lưu ý, status của các bài viết chuyển về Published

IV. Sử dụng notion-nextjs-mini-kit

1. Các bạn làm theo hướng dẫn để clone và run source NextJs ở máy nhé: tại đây
2. Theo hướng dẫn cài đặt, chúng ta sẽ cần thay thế 2 biến môi trường

NOTION_TOKEN=
NOTION_DATABASE_ID=

Trong đó:

• Notion token là token đã được tạo ra từ Bước II
• Để lấy database id từ database chúng ta đã tạo, chỉ cần mở chính trang database bằng browser và copy chuỗi như hình:

3. Chạy ứng dụng NextJs bên trên và chúng ta sẽ thấy được kết quả như sau

V. Tạo nội dung cho trang

1. Tạo nội dung cho các trang dựa trên dữ liệu đã tạo ở database trước đó
2. Publish bài viết (chọn share -> publish)
3. Quay lại trang web của chúng ta, click chọn 1 trong các bài trước đó để xem thành quả 🎉

VI. Tổng kết

References

• notion-nextjs-mini-kit: github.com/khaaleoo/notion-nextjs-mini-kit

Trên đây mình đã hướng dẫn các bạn tạo nhanh một blog cá nhân bằng việc sử dụng NextJs và Notion như một database. Nếu có bất cứ câu hỏi hoặc đóng góp nào, các bạn để lại phía dưới bình luận cho mình biết nhé. Cảm ơn tất cả mọi người

Happy coding! 🙌🏻