Nếu bạn đang tìm kiếm một mẫu blog hiện đại được xây dựng bằng Next.js, dự án NextJS Base Blog là một điểm khởi đầu tuyệt vời. Đây là một ứng dụng blog mã nguồn mở đầy đủ tính năng được xây dựng bằng Next.js 15, React 19, TypeScript và Tailwind CSS 4 .
Dự án cung cấp kiến trúc gọn gàng, giao diện người dùng hiện đại componentsvà lớp API giả lập, lý tưởng cho các nhà phát triển muốn xây dựng blog nhanh chóng mà không cần thiết lập phần backend.
Kho lưu trữ GitHub: https://github.com/bfotool/nextjs-base-blog
Dự án này đặc biệt hữu ích cho:
Các nhà phát triển đang học về ứng dụng Next.js.Router
Xây dựng blog hoặc trang web nội dung nhanh chóng
Tạo dự án mẫu Next.js
Phát triển các tính năng giao diện người dùng trước khi kết nối với API phụ trợ thực sự.
Tổng quan dự án
NextJS Base Blog được thiết kế như một mẫu blog sẵn sàng cho môi trường sản xuất, với nhiều tính năng phổ biến thường thấy trên các trang web nội dung hiện đại.
Dự án bao gồm:
trang chủ với các bài đăng nổi bật
trang bài đăng blog
lọc theo danh mục
tìm kiếm toàn văn
đánh số trang
mục lục
bài viết liên quan
chủ đề tối/sáng
Một trong những phần thú vị nhất của dự án là Lớp API giả lập, mô phỏng API REST bằng cách sử dụng các bộ chặn Axios. Điều này cho phép các nhà phát triển xây dựng và kiểm thử ứng dụng mà không cần máy chủ phụ trợ .
Các tính năng chính
Trang chủ
Trang chủ hiển thị một số phần quan trọng:
bài đăng nổi bật
bộ lọc danh mục
một lưới các bài đăng trên blog
điều hướng phân trang
Giao diện hoàn toàn tương thích và được tối ưu hóa cho cả máy tính để bàn và thiết bị di động.
Trang bài đăng trên blog
Mỗi bài viết đều có thể truy cập thông qua một lộ trình linh hoạt:
/blog/[slug]
Trang bài đăng trên blog bao gồm một số tính năng hữu ích:
toàn bộ nội dung bài viết
mục lục tự động
thời gian đọc ước tính
nút chia sẻ mạng xã hội
gợi ý bài viết liên quan
Những tính năng này giúp tạo ra trải nghiệm đọc chuyên nghiệp tương tự như các nền tảng blog hiện đại.
Trang danh mục
Người dùng có thể duyệt bài viết theo danh mục.
Ví dụ về lộ trình:
/blog/category/[slug]
Tính năng này cho phép người đọc khám phá nội dung trong các chủ đề cụ thể.
Chức năng tìm kiếm
Dự án này bao gồm một trang tìm kiếm tích hợp sẵn:
/search
Chức năng tìm kiếm hỗ trợ:
kết quả thời gian thực
đầu vào đã khử nhiễu
Tìm kiếm theo tiêu đề, đoạn trích và thẻ
Điều này giúp cải thiện khả năng sử dụng và giúp người dùng nhanh chóng tìm thấy nội dung phù hợp.
Trang Giới thiệu và Liên hệ
Dự án này cũng bao gồm các trang bổ sung thường thấy trên các blog chuyên nghiệp.
Trang Giới thiệu
Trang Giới thiệu trình bày:
đội
câu chuyện dự án
giá trị cốt lõi
Trang Liên hệ
Trang Liên hệ bao gồm một biểu mẫu đã được xác thực đầy đủ với:
xác thực biểu mẫu
thông báo dạng pop-up
phản hồi thành công và lỗi
Hỗ trợ Chế độ tối
Blog này hỗ trợ chế độ tối và chế độ sáng .
Các tính năng bao gồm:
tự động phát hiện chủ đề hệ thống
công tắc thủ công
Lưu trữ chủ đề bằng localStorage
Lớp API giả lập(Phát triển không cần Backend)
Một trong những phần thú vị nhất của dự án này là hệ thống API giả mạo của nó .
Thay vì gọi trực tiếp đến máy chủ thực, ứng dụng sử dụng các bộ chặn Axios để mô phỏng phản hồi API REST.
Cách thức hoạt động của API giả mạo
Phiên bản Axios được tạo trong:
src/services/api-client.ts
Khi biến môi trường được kích hoạt:
NEXT_PUBLIC_USE_MOCK_API=true
Các yêu cầu bị chặn trước khi đến được mạng.
Các trình xử lý giả lập trả về các phản hồi giả với độ trễ thực tế(200–600 ms).
Phản hồi hoạt động giống như phản hồi API thực sự.
Dữ liệu giả được lưu trữ trong:
src/mocks/
Bao gồm:
bài đăng mẫu
tác giả
Thể loại
Các điểm cuối API khả dụng
API giả lập hỗ trợ một số điểm cuối:
| Phương pháp | Điểm cuối | Sự miêu tả |
|---|---|---|
| LẤY | /bài đăng | Bài đăng trên blog được phân trang |
| LẤY | /bài viết/nổi bật | Bài viết nổi bật |
| LẤY | /posts/:slug | Bài đăng blog đơn lẻ |
| LẤY | /Thể loại | Danh sách danh mục |
| LẤY | /tác giả | Danh sách tác giả |
| BƯU KIỆN | /liên hệ | Gửi biểu mẫu liên hệ |
Ngăn xếp công nghệ
Dự án này sử dụng một nền tảng giao diện người dùng hiện đại.
| Lớp | Công nghệ |
|---|---|
| Khung | Next.js 15 |
| Thư viện giao diện người dùng | React 19 |
| Ngôn ngữ | TypeScript |
| Tạo kiểu tóc | Tailwind CSS 4 |
| Máy khách HTTP | Axios |
| Biểu tượng | Lucide React |
| Xơ vải | ESLint |
| Định dạng | Xinh đẹp hơn |
Ngăn xếp này cung cấp:
an toàn kiểu mạnh
kiến trúc dễ bảo trì
trải nghiệm nhà phát triển hiện đại
Cấu trúc dự án
Cấu trúc dự án tuân theo một kiến trúc gọn gàng và có khả năng mở rộng.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
Ứng dụngRouter
Thư mục này appchứa tất cả các tuyến đường của ứng dụng.
Ví dụ:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Điều này tuân theo kiến trúc ứng dụng Next.jsRouter được giới thiệu trong các phiên bản Next.js mới hơn.
Các thành phần
Giao diện người dùng componentsđược sắp xếp thành các nhóm hợp lý:
components/layout
components/common
components/blog
Cấu trúc này giúp mã giao diện người dùng được sắp xếp gọn gàng và dễ bảo trì hơn.
Lớp dịch vụ
Thư mục này serviceschứa logic liên quan đến API:
Cấu hình máy khách API
dịch vụ bưu chính
dịch vụ theo danh mục
dịch vụ biểu mẫu liên hệ
Lớp này tách biệt logic truy xuất dữ liệu khỏi giao diện người dùngcomponents, giúp cải thiện khả năng mở rộng.
Hướng dẫn cài đặt
Yêu cầu
Trước khi bắt đầu, hãy đảm bảo bạn đã chuẩn bị đầy đủ:
Node.js phiên bản 18 trở lên
npm, yarn, hoặc pnpm
Sao chép kho lưu trữ
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Cài đặt các phần phụ thuộc
npm install
Cấu hình biến môi trường
cp .env.example .env
Khởi động máy chủ phát triển
npm run dev
Mở trình duyệt của bạn và truy cập:
http://localhost:3000
Các kịch bản có sẵn
| Yêu cầu | Sự miêu tả |
|---|---|
| npm run dev | Khởi động máy chủ phát triển |
| npm run build | Tạo bản dựng sản xuất |
| npm run start | Khởi động máy chủ sản xuất |
| npm run lint | Chạy ESLint |
| npm run format | Định dạng mã bằng Prettier |
| npm run type-check | Chạy kiểm tra TypeScript |
Chuyển sang API thực sự
Nếu bạn muốn kết nối dự án với API máy chủ thực sự, hãy làm theo các bước sau.
Bước 1: Vô hiệu hóa API giả lập
Chỉnh sửa tập .envtin:
NEXT_PUBLIC_USE_MOCK_API=false
Bước 2: Thiết lập URL cơ sở của API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Bước 3: So khớp các loại dữ liệu
Hãy đảm bảo API phía máy chủ của bạn trả về dữ liệu khớp với các định nghĩa TypeScript trong:
src/types/index.ts
Không cần thay đổi mã nguồn thêm.
Tùy chỉnh nội dung
Bạn có thể chỉnh sửa nội dung mẫu bên trong:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Điều này cho phép các nhà phát triển nhanh chóng tùy chỉnh nội dung demo.
Tùy chỉnh giao diện và giao diện người dùng
Phong cách toàn cầu có thể được tìm thấy trong:
src/app/globals.css
Dự án sử dụng các phông chữ sau:
DM Sans
JetBrains Mono
Bạn có thể chỉnh sửa kiểu dáng hoặc thay thế phông chữ tùy thuộc vào yêu cầu thiết kế của mình.
Phần kết luận
NextJS Base Blog là một mẫu khởi đầu mạnh mẽ và hiện đại để xây dựng blog bằng Next.js.
Những ưu điểm chính của dự án bao gồm:
ngăn xếp công nghệ hiện đại
kiến trúc sạch
API giả lập dành cho mục đích phát triển
Dễ dàng tích hợp với các API máy chủ thực tế
Giao diện người dùng đáp ứng và các tính năng hiện đại
Nếu bạn đang xây dựng blog, trang web dành cho nhà phát triển hoặc nền tảng nội dung bằng Next.js, kho lưu trữ này có thể giúp bạn tiết kiệm đáng kể thời gian phát triển.
Bạn có thể xem mã nguồn tại đây: https://github.com/bfotool/nextjs-base-blog