Hướng Dẫn Chi Tiết Xây Dựng Blog Cá Nhân Với NextJs và Notion

Trong bài viết này, chúng ta sẽ cùng nhau khám phá cách xây dựng một blog cá nhân nhanh chóng và hiệu quả bằng cách sử dụng NextJs và Notion. Bằng cách này, bạn không chỉ tạo ra một nền tảng độc đáo để chia sẻ nội dung mà còn tối ưu hóa SEO và bảo mật cho trang web của mình.

I. Các Yêu Cầu Cần Thiết

Notion không còn là cái tên xa lạ với nhiều người. Đây là một công cụ quản lý thông tin giúp bạn lập kế hoạch, ghi chú và tích hợp với nhiều ứng dụng khác. Trong dự án này, chúng ta sẽ sử dụng Notion như một hệ thống quản lý nội dung (CMS) để quản lý các bài viết và NextJs để hiển thị nội dung đó cho người dùng.

Kiến thức cần có:

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

II. Tạo Cơ Sở Dữ Liệu và Access Token Trên Notion

Bước đầu tiên là tạo một cơ sở dữ liệu trong Notion để lưu trữ nội dung blog.

1. Chọn một trang Notion để lưu trữ cơ sở dữ liệu.

2. Thêm phần tử mới và chọn Database - Full page.

3. Tạo các trường dữ liệu cho cơ sở dữ liệu của bạn với các thông tin sau:

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

4. Tạo Access Token:

   • Truy cập vào Notion Integration để tạo secret token cho tài khoản của bạn. Chỉ cần chọn quyền đọc: Read content.
   • Sau khi tạo xong, bạn cần kết nối integration này với cơ sở dữ liệu bằng cách chọn integration vừa tạo ở mục Connect to.

III. Tạo Dữ Liệu Mẫu Cho Blog

Dựa trên cấu trúc cơ sở dữ liệu đã tạo, bạn có thể thêm một vài record mẫu và đảm bảo trạng thái của các bài viết là Published để chúng có thể hiển thị công khai.

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

Để sử dụng NextJs với cơ sở dữ liệu Notion:

1. Clone và chạy mã nguồn NextJs trên máy của bạn theo hướng dẫn.

2. Trong quá trình cài đặt, hãy thay thế hai biến môi trường sau:

   Copy

   NOTION_TOKEN=
   NOTION_DATABASE_ID=

   • NOTION_TOKEN: là token bạn đã tạo từ Bước II.
   • NOTION_DATABASE_ID: mở trang cơ sở dữ liệu bằng trình duyệt và sao chép chuỗi ID từ URL.

3. Cuối cùng, chạy ứng dụng NextJs và bạn sẽ thấy kết quả hiển thị từ Notion.

V. Tạo Nội Dung Cho Blog

Tiếp theo, bạn hãy tạo và xuất bản các bài viết dựa trên dữ liệu đã nhập vào cơ sở dữ liệu trước đó. Khi đã hoàn tất, bạn có thể chọn một bài viết trong danh sách để xem thành quả mà mình đã tạo.

VI. Tổng Kết

Như vậy, bạn đã hoàn thành việc xây dựng một blog cá nhân dễ dàng thông qua NextJs và Notion. Nếu bạn có bất kỳ câu hỏi nào hoặc muốn đóng góp ý kiến, đừng ngần ngại để lại bình luận dưới bài viết này. Cảm ơn bạn đã theo dõi!

Chúc các bạn coding vui vẻ! 🙌🏻

Tài Liệu Tham Khảo

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