- vừa được xem lúc

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

0 0 7

Người đăng: Harry

Theo Viblo Asia

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.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Viết một chiếc app quản lý Hạn sử dụng của thực phẩm

Mở đầu. Tôi là 1 kỹ sư công nghệ thông tin mới ra trường. Trong thời gian học Đại học, từ năm 1 tới năm 4, tôi đi làm thêm tại TSUTAYA (chuỗi cửa hàng bán sách, video...v.v nổi tiếng bên Nhật). Về chiếc App tôi đã phát triển. App tôi phát triển là Web App giúp quản lý hạn sử dụng của đồ ăn.

0 0 44

- vừa được xem lúc

Routing trong Next.js

Trước đó bạn có thể đang tò mò về Next.js, vào đây luôn bạn ơi. (go). .

1 0 49

- vừa được xem lúc

Cài đặt chuyển đổi ngôn ngữ trong một project NextJS

Ở phiên bản Nextjs Version 10 mới đây, việc sử dụng i18n đã trở nên dễ dàng hơn qua tính nâng cao là Internationalized Routing. Cài đặt cấu hình cơ bản. Tại file next.config.

0 0 58

- vừa được xem lúc

Cấu hình eslint airbnb, prettier cho dự next.js sử dụng typescript

Chào mọi, mình đã quay lại đây. Hôm nay mình sẽ đem đến một chủ đề linter cụ thể cấu hình eslint cho dự án next.

0 0 183

- vừa được xem lúc

Handling custom page navigation on Next.js

Last month we discussed about different kind of routing on Next.js. Here's a short example of creating a component that moves the user to next page. import { useRouter } from 'next/router'.

0 0 75

- vừa được xem lúc

Next Image một feature, một nâng cấp tuyệt vời version nextjs 10

NextJS đã cho ra mắt version 10 cách đây 2 tháng với hơn 20 fearture nâng cấp đáng giá. Chúng ta có thể kể ra những features nổi bật như. . Next/Image: với khẳ năng render image cho các kích thước màn hình tương ứng.

0 0 53