Cấu trúc thư mục trong 1 dự án NextJS - Bài 3

Chào anh em, khi lập trình trên bất kỳ framework nào thì chúng ta đều phải biết cấu trúc thư mục, chức năng của từng thư mục, từng file trong framework đó. NextJS cũng tương tự như vậy. Trong dự án sử dụng Next.js, cấu trúc thư mục mặc định đã được tổ chức sẵn để hỗ trợ việc phát triển ứng dụng React dễ dàng hơn. Trong bài viết này, tôi sẽ chia sẻ chi tiết cho anh em cấu trúc thư mục và chức năng của từng thư mục trong NextJS.

1. Cấu trúc thư mục trong NextJS

• Qua bài viết thứ 2 trong series về NextJS của mình, các bạn đã biết về cách cài đặt 1 project NexJS đầu tiên tại đây
• Khi tải và cài đặt xong các bạn sẽ nhận được 1 project có cấu trúc như sau:

my-nextjs-app/
|-- .next/             # Thư mục này chứa các tệp liên quan đến các file sau khi bạn build project của bạn để deploy lên Server. (build)
|-- node_modules/      # Thư mục chứa các module và các thư viện tương tự ReactJS
|-- public/            # Thư mục chứa các tệp tĩnh như hình ảnh, favicon, vv.
|-- src/               # Thư mục gốc cho mã nguồn ứng dụng
|   |-- pages/         # Thư mục chứa các trang của ứng dụng (routes)
|   |-- components/    # Thư mục chứa các components React được sử dụng trên nhiều trang
|   |-- styles/        # Thư mục chứa các tệp CSS hoặc styles cho ứng dụng
|   |-- utils/         # Thư mục chứa các tiện ích, hàm trợ giúp
|-- package.json       # Tệp mô tả các gói phụ thuộc và tùy chọn của dự án
|-- next.config.js     # Tùy chọn cấu hình cho Next.js
|-- tsconfig.json      # Tùy chọn cấu hình TypeScript (nếu sử dụng TypeScript)
|-- README.md          # Tệp mô tả dự án của bạn

• Như các bạn thấy ở bên trên, mỗi thư mục trong NextJS sẽ có chức năng của riêng nó. Framework sẽ khởi tạo các cấu trúc cơ bản để bạn có thể phát triển ứng dụng 1 cách nhanh chóng. Đối với ReactJS, các thư mục sẽ tuỳ thuộc vào các bố trí cấu trúc dự án của mỗi developer. NextJS đã xây dựng 1 cấu trúc cơ bản cho tất cả các dự án. Hỗ trợ các lập trình viên khi làm cùng 1 dữ án sẽ tiếp cận tốt hơn.

2. Các file đặc biệt trong NextJS

• NextJS hỗ trợ các file để tối ưu SEO cho website của bạn

SEO
sitemap.xml	Sitemap file
sitemap.js(.ts)	Generated Sitemap
robots.txt	Robots file
robots.js(.ts)	Generated Robots file

• Khi các bạn cần tối ưu SEO cho website của mình thì bạn sẽ thấy các cái tên files này rất quan trọng để Google có thể tăng ranking từ đó điểm SEO của bạn sẽ được cải thiện. Các files này là 1 điểm mới so với ReactJS.