Nhật ký học tập

Routing, hay định tuyến, là quá trình quyết định cách ứng dụng phản hồi yêu cầu của người dùng đến một URL cụ thể. Khi người dùng nhấp vào liên kết, nhập URL vào trình duyệt hoặc thực hiện hành động thay đổi URL hiện tại, cơ chế routing sẽ quyết định nội dung hoặc component nào sẽ hiển thị trên trang. Tại sao lại cần App Router? Trong khi Pages Router, với cấu trúc thư mục pages quen thuộc, đã phục vụ tốt cho việc routing trong các phiên bản trước của Next.js, App Router ra đời như một giải pháp cho những đòi hỏi ngày càng cao của ứng dụng web hiện đại. Thay vì pages, App Router sử dụng thư mục app để định nghĩa các route và layout. File layout.js/tsx Là component bao bọc bên ngoài component page.js/tsx, định nghĩa layout chung cho một nhóm route con. Hỗ trợ khai báo metadata cho từng route con. Giúp tái sử dụng layout và logic chung cho nhiều route. File page.js/tsx Đại diện cho một route cụ thể, là component chính được hiển thị cho route tương ứng. app/not-found.js/tsx   Xử lý trường

NextJs là gì? Next.js là một framework dựa trên React cho phép bạn tối ưu hoá hiệu năng, hỗ trợ SEO và trải nghiệm người dùng thông qua pre-rendering: Server Side Rendering (SSR) và Static Site Generation (SSG). Trong bài viết này, mình sẽ chia sẽ cách cài đặt và sử dụng Bootstrap 5 với NextJs Cài đặt Mở terminal và chạy lệnh sau để tạo dự án Next.js mới. Thay thế my-next-app bằng tên dự án bạn muốn. npx create-next-app@latest my-next-app cd my-next-app npm run dev Bạn chọn Typescript, ESLint, src/, App Router √ Would you like to use TypeScript? ... No / Yes √ Would you like to use ESLint? ... No / Yes √ Would you like to use Tailwind CSS? ... No / Yes √ Would you like to use `src/` directory? ... No / Yes √ Would you like to use App Router? (recommended) ... No / Yes √ Would you like to customize the default import alias (@/*)? ... No / Yes Creating a new Next.js app in D:\Practices\NextJs\nextjs-bootstrap-example. Using npm. Initializing project with template: app Installing de