Cài đặt
Các bước tạo ứng dụng NextJS
Deploy
Hướng dẫn Deploy ứng dụng NextJS. Vercel là nền tảng do chính đội ngũ tạo ra Next.js phát triển, nên hỗ trợ rất tốt.
CSR and SSR Rendering
React, Angular, Vue là những framework chuyên làm UI cho client. Tuy nhiên Next.js lại hỗ trợ cả client và server render
Server/Client component
Việc chia tách Server Component và Client Component giúp tối ưu hóa hiệu suất, tăng cường khả năng tương tác và cung cấp một trải nghiệm người dùng mạnh mẽ hơn
Routing
Next.js, framework JavaScript phổ biến cho phát triển ứng dụng web, cung cấp hệ thống routing mạnh mẽ và linh hoạt, giúp bạn dễ dàng tạo ra các ứng dụng web có cấu trúc rõ ràng và trải nghiệm người dùng mượt mà.
Layout
Layout trong Next.js là một tính năng mạnh mẽ giúp bạn tái sử dụng code HTML chung cho nhiều component khác nhau, giúp cho code gọn gàng, dễ bảo trì và hiệu quả hơn
Adding component
Tạo và sử dụng các thành phần (component) của React trong ứng dụng Next.js — giúp chia nhỏ giao diện thành các khối tái sử dụng được.
Điều hướng trang Navigation
Điều hướng trang (Navigation) trong Next.js liên quan đến việc quản lý các URL của ứng dụng web và điều hướng người dùng đến các trang khác nhau dựa trên yêu cầu của họ. Điều này được thực hiện thông qua một module gọi là Router.
CSS với Next.JS
Next.js hỗ trợ nhiều phương pháp khác nhau để định kiểu (styling) cho ứng dụng, bao gồm CSS Modules, CSS-in-JS, Styled Components, và Tailwind CSS. Mỗi phương pháp có ưu và nhược điểm riêng, phù hợp với từng loại dự án.
Data Fetching
Các phương pháp Data Fetching trong Next.js (ưu tiên Next.js 13+ sử dụng App Router). Bao gồm Server Components, Client Fetching, caching, revalidation, streaming và best practices.
Dynamic Routes
Dynamic Routes cho phép bạn tạo các đường dẫn có giá trị thay đổi dựa trên dữ liệu — ví dụ:
API Routes
API Routes trong Next.js là cách để bạn xây dựng API backend ngay bên trong ứng dụng Next.js mà không cần server riêng. Nó cho phép bạn viết các endpoint (RESTful hoặc custom) trực tiếp trong thư mục pages/api/.
Tích hợp Ant Design
Ant Design là một thư viện UI mạnh mẽ, dễ dùng, và khi kết hợp với Next.js sẽ giúp bạn xây dựng ứng dụng web nhanh chóng, đẹp mắt và tối ưu SEO.
Thêm mới bài viết
Tạo thêm logic thêm mới bài viết vào API http3000/api/posts.