Tổng quan về Next.js Boilerplate
Giới thiệu
Đây là boilerplate cho dự án frontend sử dụng Next.js, được thiết kế để cung cấp một khung làm việc đầy đủ và hiệu quả cho việc phát triển ứng dụng web hiện đại. Boilerplate này đã được cấu hình sẵn với các công nghệ và thực tiễn tốt nhất để giúp bạn bắt đầu nhanh chóng.
Công nghệ chính
- Next.js 15: Framework React với tính năng SSR, SSG, và ISR
- React 19: Thư viện UI hiện đại
- TypeScript: Hệ thống kiểu tĩnh để phát triển an toàn
- TailwindCSS: Utility-first CSS framework
- SASS: Preprocessor CSS
- Next-intl: Giải pháp đa ngôn ngữ
- React Query: Quản lý trạng thái và caching cho API
- Axios: Client HTTP
- ESLint & Prettier: Công cụ kiểm tra và định dạng code
Cấu trúc dự án
/
├── docs/ # Tài liệu dự án
├── public/ # Assets tĩnh
├── src/
│ ├── app/ # Thư mục ứng dụng Next.js
│ │ ├── [locale]/ # Tuyến đường đa ngôn ngữ
│ │ │ ├── about/ # Trang giới thiệu
│ │ │ ├── blog/ # Trang blog
│ │ │ ├── contact/ # Trang liên hệ
│ │ │ ├── policy/ # Trang chính sách
│ │ │ └── page.tsx # Trang chủ
│ │ ├── sitemap.ts # Sitemap động
│ │ └── robots.ts # Cấu hình robots
│ ├── components/ # React components
│ │ ├── common/ # Components dùng chung
│ │ ├── policy/ # Components cho trang chính sách
│ │ ├── templates/ # Template components
│ │ └── ui/ # UI components cơ bản
│ ├── features/ # Tính năng theo module
│ │ └── blog/ # Module blog
│ │ ├── components/# Components blog
│ │ ├── hooks/ # Hooks cho blog
│ │ ├── types/ # Định nghĩa kiểu cho blog
│ │ └── utils/ # Tiện ích cho blog
│ ├── hook/ # React hooks chung
│ ├── i18n/ # Cấu hình đa ngôn ngữ
│ ├── mockdata/ # Dữ liệu mẫu
│ ├── providers/ # Providers React
│ ├── services/ # Dịch vụ API
│ ├── styles/ # Styles SCSS
│ ├── types/ # Định nghĩa kiểu TS
│ └── utils/ # Tiện ích chung
├── next.config.ts # Cấu hình Next.js
├── package.json # Dependencies
└── tailwind.config.ts # Cấu hình TailwindCSS
Tính năng chính
1. Hỗ trợ đa ngôn ngữ
- Sử dụng next-intl để quản lý nội dung đa ngôn ngữ
- Định tuyến tự động với param
[locale] - Chuyển đổi ngôn ngữ mượt mà
- Hỗ trợ SEO cho mỗi ngôn ngữ
2. SEO tối ưu
- Metadata động cho từng trang
- Hỗ trợ Open Graph
- Sitemap tự động
- Robot.txt cấu hình
- Cấu trúc URL thân thiện
3. Tối ưu hình ảnh
- Component
OptimizedImagekế thừa từ Next/Image - Tự động xử lý responsive
- Lazy loading thông minh
- Placeholder cho trải nghiệm tốt hơn
4. API Client
- Cấu hình Axios với interceptors
- React Query để quản lý trạng thái và caching
- Hooks API đơn giản và mạnh mẽ
- Dữ liệu mẫu để phát triển offline
5. Component UI
- Hỗ trợ TailwindCSS
- Components UI tái sử dụng
- Layout linh hoạt
- Responsive design
6. Routing
- Hỗ trợ định tuyến động
- Tích hợp params và query
- Trang lỗi và not-found tùy chỉnh
- Middleware xác thực
Sử dụng API
Boilerplate sử dụng API REST với tiện ích mạnh mẽ:
1// Ví dụ lấy danh sách bài viết 2const { data, isLoading } = useApi('posts', { 3 fields: ['title', 'slug', 'created_at'], 4 filter: { status: { _eq: 'published' } }, 5 sort: [{ column: 'created_at', order: 'desc' }], 6 limit: 10, 7 page: 1 8});
Xem tài liệu đầy đủ trong docs/api-guide.md và các quy tắc trong api-rule.mdc.
Triển khai và xây dựng
- Phát triển:
pnpm dev - Xây dựng:
pnpm build - Triển khai: Sử dụng PM2 (cấu hình trong
ecosystem.config.cjs)
Thực tiễn tốt nhất
- Cấu trúc mô-đun: Tổ chức code theo tính năng trong thư mục
features/ - Tách biệt dữ liệu mẫu: Dữ liệu mẫu được lưu trữ riêng trong
mockdata/ - Tối ưu hóa hình ảnh: Luôn sử dụng
OptimizedImagethay vìImagetừ Next.js - Đa ngôn ngữ: Sử dụng keys cho mọi văn bản thông qua hệ thống i18n
- Type-safety: Sử dụng TypeScript ở mọi nơi có thể
Kết luận
Boilerplate này cung cấp một khung làm việc đầy đủ và hiệu quả để phát triển ứng dụng web hiện đại. Nó tích hợp các công nghệ và thực tiễn tốt nhất để giúp bạn xây dựng ứng dụng web nhanh chóng và dễ dàng bảo trì.
