Hướng dẫn chi tiết từng bước xây dựng blog cá nhân mượt mà, tối ưu SEO bằng Next.js App Router, Tailwind CSS và Notion API. Deploy miễn phí lên Vercel cho newbie.
Hướng Dẫn Build Blog Cá Nhân Siêu Tốc Bằng Next.js App Router & Notion API (Cho Newbie)
Bạn là dev và muốn tạo một trang blog cá nhân thật "xịn xò" nhưng ngại viết CMS riêng? Hay bạn chỉ đơn giản muốn dùng Notion – công cụ ghi chú quen thuộc – làm "Database Backend" để gõ bài cho tiện, còn giao diện thì chuẩn chỉnh, mượt mà chuẩn Next.js?
Bài viết này sinh ra để dành cho bạn! Chúng ta sẽ cùng nhau xây dựng một trang blog cá nhân tối ưu SEO, giao diện đẹp mắt với Tailwind CSS và deploy lên Vercel chỉ trong vài phút.
Vì sao combo Next.js + Notion API lại cực "hot"?
Trước khi bắt tay vào gõ lệnh, hãy cùng nhìn qua lý do combo này được các dev cực kỳ ưa chuộng:
Quản lý nội dung cực sướng: Bạn gõ bài trên Notion giống như dùng Google Docs, không cần chạm vào source code mỗi khi viết bài mới.
Tốc độ tải trang "xé gió": Next.js App Router tối ưu render trang cực mượt, hỗ trợ SEO vượt trội.
Giao diện tùy biến 100%: Dùng Tailwind CSS giúp bạn tha hồ "biến hóa" giao diện theo đúng phong cách cá nhân.
Miễn phí 100%: Cả Notion API, Next.js và Vercel đều có package Free siêu hời cho cá nhân.
Buớc 1: Thiết lập Notion Database & Lấy API Key
Bình luận
Đầu tiên, chúng ta cần biến Notion thành thư viện chứa bài viết của bạn.
Tạo Notion Database:
Tạo một trang Notion mới và chọn dạng Database - Full page (hoặc Inline).
Tạo các cột (Properties) cơ bản như sau:
Title (Title): Tên bài viết.
Slug (Text): Đường dẫn URL (ví dụ: bai-viet-dau-tien).
Published (Checkbox): Đánh dấu bài viết đã sẵn sàng đăng hay chưa.
Đặt tên (ví dụ: My Blog App), chọn Workspace của bạn và nhấn Submit.
Sao chép mã Internal Integration Secret (Đây chính là NOTION_TOKEN của bạn).
Chia sẻ Database với Integration:
Mở trang Notion Database vừa tạo, nhấn vào nút ... ở góc phải trên cùng $\rightarrow$ chọn Connections (hoặc Add connections) $\rightarrow$ Tìm và thêm Integration bạn vừa tạo.
Lấy Database ID: Nhìn vào URL của trang Notion Database, chuỗi ký tự đứng giữa / cuối cùng và dấu ? chính là NOTION_DATABASE_ID.
(Ví dụ: notion.so/workspace/a1b2c3d4e5f6...?v=... thì a1b2c3d4e5f6... là ID).
Bước 2: Khởi tạo dự án Next.js App Router & Tailwind CSS
Mở terminal lên và gõ câu lệnh "thần thánh" sau:
Bash
Khi Terminal hỏi các tùy chọn, hãy chọn như sau:
Would you like to use TypeScript?Yes (Khuyên dùng để code không bị bug linh tinh).
Would you like to use ESLint?Yes.
Would you like to use Tailwind CSS?Yes.
Would you like to use src/ directory?Yes.
Would you like to use App Router?Yes (Bắt buộc nhé).
Cài đặt thêm SDK chính thức của Notion:
Bash
Tạo file .env.local ở thư mục gốc để lưu thông tin bảo mật:
Đoạn mã
Bước 3: Kết nối Next.js với Notion API
Tạo file src/lib/notion.ts để cấu hình kết nối và viết hàm lấy danh sách bài viết:
TypeScript
Bước 4: Hiển thị danh sách bài viết ra Trang chủ
Mở file src/app/page.tsx và cập nhật lại giao diện trang chủ đơn giản, hiện đại với Tailwind CSS:
TypeScript
Bước 5: Deploy "1-Nốt-Nhạc" lên Vercel
Mọi thứ đã sẵn sàng dưới local, giờ là lúc đưa blog của bạn lên môi trường Internet!
Đẩy code lên GitHub: Tạo 1 repository mới trên GitHub và push toàn bộ source code của bạn lên.
1import { getPublishedPosts } from '@/lib/notion';2import Link from 'next/link';34export default async function HomePage() {5 const posts = await getPublishedPosts();6
Hướng dẫn từng bước tích hợp đa ngôn ngữ (i18n) cho blog Next.js App Router và Notion API. Tối ưu SEO quốc tế, tự động phát hiện ngôn ngữ trình duyệt và giao diện chuyển đổi mượt mà.
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.
Thiết lập CSP Header an toàn cho Next.js App Router: directives quan trọng, nonce động, strict-dynamic, third-party scripts, reporting, kiểm thử và checklist production.
Shan DevCập nhật 5 phút đọcĐang tải lượt xem
