{params.slug}
; } ``` ## 6. Tổ chức file — `/components` nên đặt ngoài `/app` Thư mục `/app` chỉ nên chứa các routing files. Custom components nên đặt **bên ngoài** thư mục `/app`: ```text theme={null} /app ├── layout.js └── page.js /components ← đặt ở ngoài /app └── header.js ``` Lý do: thư mục trong `/app` mà không có `page.js` sẽ không tạo ra route — nhưng để tránh nhầm lẫn, tốt hơn là tách biệt hoàn toàn. Để import cho gọn, dùng **path alias** `@` bằng cách cấu hình `jsconfig.json`: ```json theme={null} { "compilerOptions": { "paths": { "@/*": ["./*"] } } } ``` Sau đó import như sau: `import Header from '@/components/header'`. ## 7. CSS Modules — tránh xung đột class name Bên cạnh `global.css` như mọi app, Next.js hỗ trợ sẵn CSS Modules. Mỗi component có file CSS riêng: ```text theme={null} /components ├── header.js └── header.module.css ``` ```jsx theme={null} import classes from '@/components/header.module.css'; Home ``` Class name sẽ được tự động scope theo component, tránh hoàn toàn việc “trùng tên class” giữa các component khác nhau. ## 8. Component `
{images.map((image, index) => (
);
}
```
Nếu quên khai báo `'use client'`, Next.js sẽ báo lỗi ngay:
```text theme={null}
You're importing a component that needs useState.
This only works in a Client Component...
```
### Quy tắc: Đặt `'use client'` đúng chỗ, càng sâu càng tốt
**Một sai lầm phổ biến: đặt** `'use client'` **ở component cha, kéo theo toàn bộ cây component bên dưới trở thành Client Component — mất đi lợi ích của SSR.**
**Best practice:** tách logic cần client-side ra thành component con riêng, đặt `'use client'` ở đó, và dùng nó trong Server Component:
```jsx theme={null}
// nav-link.js — client component nhỏ gọn
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
export default function NavLink({ href, children }) {
const path = usePathname();
return (
{children}
);
}
```
```jsx theme={null}
// header.js — vẫn là Server Component
// nếu đặt 'use client' ở header để sử dụng được 'usePathname', sẽ biến header thành client-component
import NavLink from './nav-link';
export default function Header() {
return (
);
}
```
Nguyên tắc: **chỉ “client hoá” những gì thực sự cần tương tác phía client**.
## Tổng kết
Sau buổi đầu tiên với Next.js, bạn đã nắm được những nền tảng quan trọng:
* **Routing** dựa trên cấu trúc thư mục, với các reserved files như `page.js`, `layout.js`, `error.js`…
* `` để navigate thông minh giữa SSR và CSR
* **Dynamic routes** với `[slug]`
* **Tổ chức dự án** với `/components` bên ngoài `/app`, dùng `@` alias
* **CSS Modules** để scope style theo component
* `