Cấu trúc thư mục ứng dụng&nbsp;
Để hiểu rõ hơn về cấu trúc tổng thể của dự án Bộ định tuyến ứng dụng Next.js, chúng ta hãy xem cấu trúc thư mục của một dự án mẫu:
<pre>~ /app // folder gốc</pre>
<pre>&nbsp;&nbsp;&nbsp;- layout.tsx // layout gốc</pre>
<pre>&nbsp;&nbsp;&nbsp;- page.tsx // trang chủ ( ví dụ nhập "/" sẽ ra trang này )</pre>
<pre>&nbsp;&nbsp;&nbsp;- error.tsx // trang báo lỗi, khi website gặp lỗi sẽ hiển thị trang này</pre>
<pre>&nbsp;&nbsp;&nbsp;- loading.tsx // trang loading, hiển thị trang trang chính đang tải</pre>
<pre>&nbsp;&nbsp;&nbsp;- tasks // mục tasks ( có thể đổi thành bất kỳ tên gì )</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- page.tsx // trang tasks</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- [id] // mục [id], lưu ý [id] chỉ là tên của mục</pre>
<pre> - pagge.tsx // trang tasks/:id, bây giờ id có thể là bất cứ nội dung gì</pre>
Mặc dù quy ước router của Next.js có thể phức tạp hơn so với ví dụ này, nhưng những quy ước tên file ở trên sẽ là những gì bạn hay sử dụng nhất trong hầu hết các trường hợp.
Nhờ việc sử dụng quy ước đặt tên cho các loại cụ thể của components, router hiện tại có thể linh hoạt và mạnh mẽ hơn bao giờ hết. Thực tế, chúng ta có thể đặt trang (pages) và các components/hooks được sử dụng bởi trang đó cùng một nơi.&nbsp;
Giả sử chúng ta có một thư mục có tên task như trên, chúng ta cũng có thể thêm các thành phần và hook được sử dụng bởi các trang "task" vào cùng một thư mục: &nbsp;&nbsp;
<pre>- tasks</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;- database</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- queries.ts</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- mutations.ts</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;- components</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- CreateTaskForm.tsx</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- TaskList.tsx</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- TaskListItem.tsx</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;- hooks</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- use-create-task.ts</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- use-delete-task.ts</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;- page.tsx</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;- template.tsx</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;- [id]</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- route.ts</pre>
Như bạn có thể thấy ở trên, chúng ta đã thêm 3 thư mục mới: database, components và hook. Các thư mục này chứa các components và hook được trang task sử dụng.
Trong bộ định tuyến trước ( page router ), điều này là không thể - vì mọi tệp trong thư mục pages đều được coi là một trang. Điều này có nghĩa là chúng ta phải tạo một thư mục riêng cho các thành phần và hook, sau đó import chúng vào trang.

Next.js App Router là một router mới được tích hợp vào Next.js, bắt đầu từ phiên bản Next.js 14. Đây là một sự viết lại hoàn toàn của router cũ và được thiết kế để linh hoạt và mạnh mẽ hơn so với router cũ. Trong bài viết này, chúng ta sẽ tìm hiểu về router mới và cách nó hoạt động nhé.

Hiểu rõ về Next.js App Router