Bài báo cáo Đề tài tìm hiểu nextjs

Được xây dựng trên nền tảng Node.js và sử dụng thư viện React, Next.js đã đem lại nhiều tiện ích và cách tiếp cận mới cho việc xây dựng các ứng dụng web đa dạng.. Chúng tôi đã nghiên cứu

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC HOA SEN

BÀI BÁO CÁO

Đề Tài: Tìm Hiểu NextJS

Môn học: THỰC HÀNH CÔNG NGHỆ THÔNG TIN 2 Thành viên thực hiện:

Lê Minh Vũ - 22111512

Phan Hoàng Thành - 22101102

Phạm Ngọc Hoàng Thiên – 22012065

Phạm Anh Tú – 22001510

Đinh Quốc Vinh - 22114550

Tp Hồ Chí Minh, ngày 18 tháng 09 năm 2023

LỜI MỞ ĐẦU

Next.js, một framework phát triển ứng dụng web, đã trở thành một phần quan trọng trong cộng đồng phát triển web hiện đại Được xây dựng trên nền tảng Node.js và sử dụng thư viện React, Next.js đã đem lại nhiều tiện ích và cách tiếp cận mới cho việc xây dựng các ứng dụng web đa dạng Điều này đã tạo ra một sự quan tâm lớn từ phía cộng đồng phát triển và các công ty công nghệ

Báo cáo này là kết quả của quá trình tìm hiểu sâu rộng về Next.js, bao gồm các tính năng, lợi ích, cách sử dụng, và ví dụ thực tế Chúng tôi đã nghiên cứu cách Next.js có thể cải thiện hiệu suất và trải nghiệm người dùng trong việc phát triển ứng dụng web, cũng như cách nó hỗ trợ các tiêu chuẩn phát triển hiện đại như SSR (Server-Side Rendering) và SSG (Static Site Generation)

Trong báo cáo này, chúng tôi sẽ đi sâu vào các khía cạnh quan trọng của Next.js và trình bày cách sử dụng nó để xây dựng các ứng dụng web chất lượng cao Chúng tôi cũng sẽ cung cấp ví dụ cụ thể và hướng dẫn để bạn có thể khám phá Next.js một cách chi tiết và thực tế

LỜI CẢM ƠN

Chúng tôi xin gửi lời cảm ơn sâu sắc đến mọi người đã tham gia và ủng hộ báo cáo này

về đề tài "Tìm hiểu về Next.js." Sự quan tâm và đóng góp của các bạn đã giúp chúng tôi hoàn thành dự án này một cách thành công

Đầu tiên, chúng tôi xin bày tỏ lòng biết ơn đến Trần Thị Trương Thi, người đã hỗ trợ chúng tôi trong việc xác định và chọn đề tài, cung cấp sự hướng dẫn quý báu và tạo điều kiện để chúng tôi phát triển kiến thức và kỹ năng trong quá trình tìm hiểu Next.js Chúng tôi cũng muốn bày tỏ lòng biết ơn đến các bạn trong nhóm nghiên cứu và thực hiện dự án Sự hợp tác, tinh thần làm việc nhóm và cam kết của mọi người đã làm cho việc nghiên cứu và viết báo cáo trở nên một trải nghiệm học tập đáng nhớ

Cuối cùng, chúng tôi xin gửi lời cảm ơn đến tất cả những người bạn, gia đình và người thân yêu đã luôn ở bên cạnh và động viên chúng tôi trong suốt thời gian thực hiện dự án này

Báo cáo này không thể thực hiện được mà không có sự đóng góp của mọi người Chúng tôi hi vọng rằng nội dung báo cáo sẽ hữu ích và cung cấp giá trị trong việc tìm hiểu về Next.js và phát triển ứng dụng web

Xin chân thành cảm ơn!

Trân trọng,

Nhóm 1

NHẬN XÉT CỦA GIẢNG VIÊN

MỤC LỤC

Chương 1: Giới thiệu về NextJS 8

1 Khái niệm về NextJS 8

2 Câu lệnh 8

3 Các tính năng 10

Chương 2: Những lý do người dùng nên sử dụng NextJS 10

1 Tại sao nên sử dụng NextJS 10

2 Điểm mạnh 11

3 Điểm yếu 12

4 Tính ứng dụng của NextJS 12

Chương 3: Hướng dẫn cài đặt và sử dụng 14

1 Cài đặt 14

1.1 Công cụ code (IDE) 14

1.2 Môi trường code 14

2 Nền tảng sử dụng trên Visual Code 15

2.1 Tạo một môi trường cho chương trình của chúng ta: 15

2.2 Tiến hành mở dự án 16

2.3 Các chúng năng và tác vụ cơ bản trong chương trình : 16

Chương 4: Tổng kết 18

DANH MỤC HÌNH ẢNH

Hình 1: Ảnh giới thiệu về NextJS 5

Hình 2: các điểm mạnh của NextJS 6

Hình 3: Các phiên bản miễn phí 8

Hình 4: Các phiên bản tùy chọn 9

Hình 5: Tạo thành công một dự án 10

Hình 6: Hướng dẫn vào dự án bằng Terminal 11

Hình 7: Giao diện, chức năng, và các tác vụ cơ bản trong chương trình 12

NHẬP ĐỀ

Trong thời đại số hóa ngày càng phát triển, việc xây dựng ứng dụng web hiệu suất cao không chỉ là một thách thức mà còn là một yêu cầu cơ bản để thu hút và duy trì người dùng Trong báo cáo này, chúng ta sẽ tìm hiểu về Next.js, một framework JavaScript phía máy chủ mạnh mẽ được xây dựng trên nền tảng React Next.js hứa hẹn mang đến một loạt ưu điểm, bao gồm khả năng server-side rendering (SSR), quản lý định tuyến tiện lợi

và tối ưu hóa hiệu suất

Mục tiêu của báo cáo này là cung cấp một cái nhìn toàn diện về Next.js, từ những khái niệm cơ bản đến cách áp dụng nó trong việc xây dựng các ứng dụng web thực tế Chúng

ta sẽ đi sâu vào các chức năng cốt lõi của Next.js, cung cấp ví dụ cụ thể và đánh giá tầm quan trọng của nó trong cả việc phát triển ứng dụng lớn và ứng dụng đơn giản

1

Chương 1: Giới thiệu về NextJS

1 Khái niệm về NextJS

Next.js là một framework front-end React được phát triển dưới dạng open-source bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang web static Next.js xây dựng dựa trên thư viện React, có nghĩa là các ứng dụng Next.JS sử dụng core của React và chỉ thêm các tính năng bổ sung Việc triển khai ứng dụng SSR cho phép máy chủ truy cập tất cả dữ liệu được yêu cầu và xử lý JavaScript cùng nhau để hiển thị trang Sau đó, trang được gửi lại toàn bộ cho trình duyệt và ngay lập tức được hiển thị SSR cho phép các trang web load trong thời gian nhỏ nhất và tăng trải nghiệm người dùng với khả năng phản hồi nhanh hơn

Ngoài ra, sử dụng SSR cũng mang lại cho bạn lợi thế về SEO, giúp trang web của bạn hiển thị cao hơn trên các trang kết quả của công cụ tìm kiếm SSR làm cho các trang web xếp hạng tốt hơn cho SEO vì chúng tải nhanh hơn và nhiều nội dung trang web

có thể được quét bởi các SEO trackers Thẻ <head> trong Next.js cũng cho phép bạn chỉnh sửa thẻ <head> của một trang web, điều mà bạn không thể thực hiện trong React Thẻ <head> là một phần cốt lõi trong metadata của trang web và góp phần vào xếp hạng SEO của trang web

2 Câu lệnh

Một số câu lệnh cơ bản cho việc phát triển và quản lý dự án NextJS:

Tạo một dự án NextJS:

2

npx create-next-app my-next-app: Tạo một dự án NextJS mới với tên "my-next-app" có thể thay đổi tên dự án theo ý muốn

Chạy ứng dụng trong chế độ phát triển:

npm run dev: Khởi động máy chủ phát triển và chạy ứng dụng trong chế độ phát triển, cho phép thực hiện thay đổi và xem kết quả ngay lập tức

Xây dựng ứng dụng NextJSs:

npm run build: Xây dựng ứng dụng NextJS để tạo các tệp tĩnh sẵn sàng cho việc triển khai

Chạy ứng dụng sau khi đã xây dựng:

npm start: Khởi động ứng dụng NextJS trong chế độ sản phẩm sau khi đã xây dựng Sau khi chạy lệnh này, ứng dụng sẽ chạy trên cổng mặc định là 3000 (có thể được cấu hình)

Tạo một trang mới:

Có thể tạo một trang mới bằng cách tạo một tệp mới trong thư mục pages Ví dụ:

pages/about.js sẽ tạo một trang "about" trong ứng dụng của bạn

Tạo một API Route mới:

Có thể tạo một API Route mới bằng cách tạo một tệp trong thư mục pages/api Ví dụ:

pages/api/users.js sẽ tạo một API Route cho việc xử lý yêu cầu liên quan đến người dùng

Kiểm tra mã với ESLint:

npm run lint: Kiểm tra mã của bạn với ESLint để phát hiện và sửa các lỗi cú pháp và quy ước trong mã

Kiểm tra mã với TypeScript (nếu sử dụng TypeScript):

npm run type-check: Kiểm tra mã TypeScript của bạn để đảm bảo tính kiểu của nó

3

3 Các tính năng

Một số tính năng chính của NextJS:

 Server side Rendering(SSR): NextJS cho phép thông dịch (render) các trang web

phía máy chủ, giúp cải thiện tốc độ tải trang và SEO bằng cách tạo các trang HTML hoàn chỉnh trên máy chủ trước khi gửi chúng đến trình duyệt

 Code Splitting: NextJS tự động phân chia mã JavaScript thành các phần nhỏ để

tối ưu hóa tải trang và hiệu xuất

 Routing đơn giản: NextJS đi kèm với hệ thống định tuyến (routing) dễ sử dụng,

giúp các bạn xây dựng ứng dụng đa trang một cách dễ dàng

 Hỗ trợ cho API Routers: có thể dễ dàng xây dựng các API bằng cách sử dụng

thư mục ‘pages/api’ trong dự án

 Hỗ trợ TypeScript: NextJS hỗ trợ JavaScrip một cách nền tảng, cho phép viết mã

JavaScript kiểu tĩnh và an toàn hơn

 Tối ưu hóa SEO: với khả năng SSR, bạn có thể tối ưu hóa trang web của mình

cho các công cụ tìm kiếm

 Hot Moidule Replacement(HMR): NextJS hỗ trợ HMR, cho phép bạn cập nhật

mã mà không cần tải lại trình duyệt

 Phát triển đơn giản: Các công cụ phát triển như Fast Refresh giúp phát triển ứng

dụng một cách nhanh chòng và dễ dàng

Chương 2: Những lý do người dùng nên sử dụng NextJS

1 Tại sao nên sử dụng NextJS

Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO Server Side Rendering (SSR) hoạt động bằng cách thay đổi luồng yêu cầu (altering the request flow) của ứng dụng React để tất cả các thành phần ngoại trừ máy khách gửi thông tin của họ đến máy chủ

Với tất cả thông tin trên máy chủ, nó có thể hiển thị trước (pre-render) HTML của trang Máy khách có thể gửi một yêu cầu đến máy chủ và nhận toàn bộ trang HTML thay vì yêu cầu từng thành phần riêng lẻ với client-side rendering (Hưng, 2021)

4

Hình 1: Ảnh giới thiệu về NextJS

2 Điểm mạnh

 Ứng dụng Next.js tải nhanh hơn đáng kể so với ứng dụng React do được render phía Server

 Hỗ trợ các tính năng cho static web

 Đối với những ai đã có kinh nghiệm làm việc với React thì việc tiếp tập NextJS sẽ

là một việc dễ dàng

 Tự động code splitting cho các page nhằm tối ưu hoá performance khi load trang

 Dễ dàng xây dựng các API internal thông qua các API routes tích hợp sẵn và tạo các endpoit API

 Hỗ trợ tích hợp cho route cho page, CSS, JSX và TypeScript

 Nhanh chóng thêm các plugin để tùy chỉnh Next.js theo nhu cầu của trang cụ thể của bạn (Lê, 2022)

5

Hình 2: các điểm mạnh của NextJS

3 Điểm yếu

Nhược điểm thực sự duy nhất của Next.js là nó là một framework được cố định, có nghĩa

là nó có một phương pháp và bộ công cụ cụ thể mà nó muốn bạn sử dụng để xây dựng các ứng dụng của mình Tuy nhiên, các tùy chọn của Next.js sẽ phù hợp với phạm vi của hầu hết các dự án

4 Tính ứng dụng của NextJS

Next.js là một framework phát triển ứng dụng web được xây dựng trên nền tảng Node.js

và React Nó cung cấp nhiều tính năng mạnh mẽ và có nhiều ứng dụng hữu ích trong phát triển ứng dụng web Dưới đây là một số ứng dụng quan trọng của Next.js:

Universal (Isomorphic) Rendering: Next.js cho phép việc render ở cả phía máy chủ và phía máy khách Điều này giúp cải thiện hiệu suất và tối ưu hóa SEO của ứng dụng web

Routing Tĩnh: Next.js cung cấp routing tĩnh dựa trên thư mục và tên tệp Bạn có thể tạo các trang riêng lẻ bằng cách đặt tệp trong thư mục pages Điều này giúp quản lý routing

dễ dàng hơn

6

Server-Side Rendering (SSR): Next.js hỗ trợ SSR mà bạn có thể sử dụng để render nội dung trên máy chủ trước khi gửi cho máy khách Điều này giúp cải thiện thời gian tải trang và trải nghiệm người dùng

Static Site Generation (SSG): Next.js cho phép bạn tạo các trang tĩnh tại thời điểm xây dựng (build time) thay vì tại thời điểm yêu cầu (runtime) Điều này giúp cải thiện tốc độ tải trang và giảm tải máy chủ

Quản lý Dữ liệu: Next.js tích hợp tốt với React và các thư viện quản lý trạng thái như Redux hoặc Mobx để quản lý dữ liệu trạng thái trên máy khách

API Routes: Bạn có thể tạo các API routes dễ dàng bằng cách đặt các tệp trong thư mục pages/api Điều này giúp bạn xây dựng các endpoint API một cách dễ dàng trong cùng một ứng dụng

Tối ưu cho SEO: Nhờ SSR và SSG, Next.js giúp cải thiện SEO bằng cách đảm bảo rằng nội dung của bạn có thể được đánh giá bởi các công cụ tìm kiếm

Hỗ trợ TypeScript: Next.js có sẵn hỗ trợ TypeScript, giúp bạn viết mã an toàn hơn và dễ bảo trì hơn

Phát triển nhanh chóng: Next.js giúp giảm bớt công đoạn cấu hình và cho phép bạn tập trung vào việc phát triển ứng dụng thay vì việc cấu hình môi trường phát triển

7

Mở rộng và Cộng đồng lớn: Next.js có một cộng đồng lớn và sự hỗ trợ từ Vercel, giúp bạn dễ dàng tìm hiểu và giải quyết các vấn đề trong quá trình phát triển

Với những tính năng và ứng dụng này, Next.js thường được sử dụng để phát triển các ứng dụng web đa dạng, từ các trang web tĩnh đơn giản đến các ứng dụng web phức tạp và

có hiệu suất cao

Chương 3: Hướng dẫn cài đặt và sử dụng

1 Cài đặt

1.1 Công cụ code (IDE)

Sử dụng visual code vì có hỗ trợ hiệu quả javascript/typescript và nó hoàn toàn miễn phí

Hình 3: Các phiên bản miễn phí

8

tùy thuộc vào hệ điều hành của người dùng đang sử dụng và tùy chỉnh những phiên bản mong muốn, mọi người có thể tải Visual Code miễn phí trên trang web

1.2 Môi trường code

Sử dụng Node.Js làm môi trường code

Hình 4: Các phiên bản tùy chọn

Tất cả mọi người có thể tải nodejs miễn phí trên trang chủ chính thức của nodejs Tùy vào phiên bản nodejs mà mọi người có thể download như mong muốn của mình

2 Nền tảng sử dụng trên Visual Code

2.1 Tạo một môi trường cho chương trình của chúng ta:

Vào thư mục lưu trữ của môi trường -> mở terminal -> thực hiện lệnh tạo dự án mới bằng cách nhập lệnh (ví dụ : npx create-newproject@latest ) trong đó @lastest là cú pháp của nextjs cho phép chương trình kéo phiên bản mới nhất của môi trường về cho chương trình của chúng ta

9

Khi thực hiện lệnh này, termimal sẽ hỏi chúng ta một số câu hỏi để tạo chương trình, hãy bấm y (Yes) để tiếp tục, khi terminal chạy xong và báo successful thì tức là chúng ta đã tạo thành công một dự án

Hình 5: Tạo thành công một dự án

2.2 Tiến hành mở dự án

Chúng ta có thể mở dự án của chúng ta lên bằng cách đứng tại thư mục chúng ta lưu dự

án sau khi tạo thành công ở bước trên, vào terminal và ấn các dòng lệnh:

 Cd \newproject\ -> enter

 Code -> enter

Terminal sẽ đưa chúng ta đến visual studio và chúng ta có thể thực hiện các tác vụ chúng

ta mong muốn ở đây

10

Hình 6: Hướng dẫn vào dự án bằng Terminal

2.3 Các chúng năng và tác vụ cơ bản trong chương trình :

Sau khi đã thực hiện thành công bước trên thì terminal sẽ đưa ta đến chương trình chúng

ta đã tạo Sau đây là cấu trúc cơ bản của dự án Next.js mà chúng ta đã cài đặt:

 Mode_modules : thư mục chứa thư viện cần thiết để gọi hàm mong muốn

 Public : dùng để chứa các file đa nhiệm như là ảnh hay video mà chúng ta mong muốn đưa vào chương trình, hoặc có thể là file tĩnh như css hay javascrisp

 Src/app : chứa source code của chúng ta đã làm

 Eslintrc.json : dùng để kiểm tra code của chúng ta, nó thường sẽ đưa ra các cảnh báo nếu có lỗi như là lỗi cú pháp, thực tế eslint là một thư viện, chúng ta có thể tìm thấy khi search trên google

 Gitignore : dùng để lưu trữ, nhất là cho những file chúng ta không muốn

 Nex.config.js: nếu muốn dùng thêm thư viện khác đối với next.js thì ta sẽ cần đến thư mục này (nâng cao)

11

 Pakage.json : dùng để quy định và đưa ra thông tin những thư viện mà ta sử dụng cho dự án, có những thư viện đã được cài đặt sẵn

 Pakage-lock.json : thư mục ghi cụ thể những phiên bản mà chúng ta đã cài đặt, phiên bản cụ thể của thư viện

 README.md : như một người hướng dẫn

 Tsconfig.json : cấu hình compiler của typescrips (chúng ta sẽ code bằng typescrips, chương trình tạo ra website chạy trên trình duyệt, trình duyệt của chúng ta không thể hiểu không hiểu được typescrips là gì, nên nó cần trình biên

Hình 7: Giao diện, chức năng, và các tác vụ cơ bản trong chương trình

Chương 4: Tổng kết

Next.js là một dạng framework dự án mã nguồn mở, được tạo ra bởi Vercel, là một dạng

có thể code full-stack được xây dựng trên nền tảng React và javascrip/typescrip với rất

12