Next.js 15: Hướng dẫn sửa lỗi root layout ăn tất cả router

Tình huống thường gặp:

Khi sử dụng Next.js 15, bạn có thể gặp vấn đề với việc phân chia layout cho các route khác nhau. Ví dụ:

• Luồng người dùng (user) sử dụng chung một root layout.
• Luồng admin cần có một layout riêng biệt, nhưng lại bị ảnh hưởng bởi root layout mặc định.

Giải pháp:

Sử dụng Route Groups để phân chia layout một cách độc lập. Route Groups cho phép bạn:

• Gán các layout khác nhau cho từng nhóm route.
• Tránh việc các route không mong muốn bị áp dụng root layout.

Cách thực hiện:

1. Cấu trúc thư mục Route Groups:
   Tạo các thư mục nhóm để định nghĩa rõ layout cho từng luồng:

app/
├── (user)/
│   ├── layout.js // Layout dành cho user
│   ├── page.js   // Trang user
├── (admin)/
│   ├── layout.js // Layout dành cho admin
│   ├── page.js   // Trang admin
├── layout.js     // Root layout mặc định

2. Sử dụng layout riêng cho từng route:
   Mỗi thư mục (user) và (admin) sẽ hoạt động độc lập, giúp tách biệt layout theo nhu cầu của bạn.

Tham khảo chi tiết:

Đọc thêm tại Next.js Route Groups Documentation.