Bài tiếp theo của nextjs thì mình sẽ nói về routing trong nextjs nhé. Mình sẽ nói ngắn gọn nhất có thể để ae đọc hình dung dứt liền luôn nha

Basic

Thư mục sign-in có file page.tsx thì nextjs sẽ tạo ra đường dẫn webapp là /sign-in

Trong thư mục phải có file page.tsx là bắt buộc nhen, file chỉ mục đường dẫn của nó luôn á.

Nested routes

Ví dụ mình muốn url /course/lession trong đó course sẽ là dynamic, mong muốn get value tên khoá học về để dùng query data. Thì mình sẽ tạo folder như sau [ **course]/lesson/page. **tsx -> nó sẽ có url kiểu kiểu như react-course/lesson?slug=bai-1 đương nhiên react-course là động nha. Case này gọi là dynamic segment. Segment ae hiểu như là thư mục cho dễ hiểu hen. Tóm cái quần lại là mục đích để lấy params ra để xử lý gọi api hay gì đó…À đừng để 2 thư mục [dynamic] cùng cấp nha ae, vì nextjs không hiểu mình vô thằng nào á nè

Còn nếu ae muốn url cứng hết thì đơn giản chỉ cần tạo folder course trong folder course có folder lession thì url sẽ luôn luôn là course/lession nè. Nếu không đúng url course/lession thì nó bắn lẹ page 404 liền. Cái này thì đơn giản hơn nhiều hen

Group

Group thì nó không tạo ra routing nha ae. Mục đích là để gom nhóm các routing liên quan vào chung ví dụ mình sẽ tạo thư mục (dashboard) thì sẽ không tạo ra route /dashboard đâu nha nếu vào thì ra 404 liền đoá

Catch-all Segments

Ví dụ mình có folder như sau shop/[…shop] thì nó sẽ chấp nhận các route như /sign-in/a, /sign-in/b nếu vào /sign-in thì sẽ báo not-found liền

Catch-all Segments

Ví dụ mình có folder như sau shop/[…shop] thì nó sẽ chấp nhận các route như /sign-in/a, /sign-in/b và bao gồm luôn route /sign-in luôn nha. Khác mỗi cái trên vậy thui đó

Params

Thông thường là dynamic routes. Như ví dụ ở trên có thư mục [ course]/lesson có url là react-course/lesson thì params là 1 object có key là course value là “react-course”. Dễ chưa =))

SearchParams

Thường là những query ở trên URL ví dụ lesson?slug=html-css. Thì slug chính là searchParams. Log ra thì nó cũng là 1 object có key là slug value là ‘html-css”

Sương sương vậy thui đó, dễ ăn, dễ trúng thưởng 😜. Hẹn ae bài tiếp theo nhennn