Tạo giao diện người dùng cho ứng dụng của chúng ta
Khi thiết kế cấu trúc của một frontend, chúng ta cũng nên xem xét cấu trúc thư mục, để rằng app của
chúng ta có thể phát triển dễ dàng trong tương lai. Tương tự như chúng ta đã làm cho backend như thế nào,
chúng ta cũng sẽ đặt tất cả mã nguồn vào một thư mục src/. Chúng ta sau đó có thể nhóm các files trong
các thư mục riêng rẽ cho các đặc tính khác nhau. Cách thức thông dụng khác để cấu trúc các dự án frontend
là nhóm code theo các routes. Tất nhiên, nó cũng là có thể pha trộn chúng, ví dụ, trong các dự án Next.js
chúng ta có thể nhóm các bộ phận của chúng ta theo các đặc tính và sau đó tạo thư mục và cấu trúc file
khác cho các routes, nơi các bộ phận được sử dụng. Cho các dự án full-stack, nó ngoài ra có nghĩa để
trước tiên chia tách code của chúng ta bằng cách tạo các thư mục riêng rẽ cho tích hợp API và các bộ phận
UI.
Bây giờ hãy định nghĩa cấu trúc thư mục cho dự án của chúng ta:
1. Tạo một thư mục src/api/ mới
2. Tạo một thư mục src/components/ mới
Tip
Nó là ý tưởng tốt để bắt đầu với một cấu trúc đơn giản trước tiên, và chỉ nest sâu hơn khi bạn thực sự
cần nó. Không tiêu dùng quá nhiều thời gian nghĩ về cấu trúc file khi bắt đầu một dự án, vì thường thì
bạn không biết trước các files nên được nhóm như thế nào, và nó có thể thay đổi sau này anyway.
Sau khi định nghĩa cấu trúc thư mục mức cao cho các dự án của chúng ta, bây giờ hãy giành vài thời gian
xem xét cấu trúc bộ phận.