강의

멘토링

커뮤니티

Programming

/

Web Development

Hướng dẫn phát triển thiết yếu của Next.js đã hoàn thành sau 3 giờ!

Bạn đang bối rối không biết nên bắt đầu từ đâu giữa làn sóng thông tin tràn ngập? Hãy thực hiện bước đầu tiên để phát triển web toàn diện Next.js với bài giảng rõ ràng và ngắn gọn này!

4 học viên đang tham gia khóa học này

Độ khó Cơ bản

Thời gian Không giới hạn

  • Su
Next.js
Next.js
TypeScript
TypeScript
React
React
ssr
ssr
Next.js
Next.js
TypeScript
TypeScript
React
React
ssr
ssr

Bạn sẽ nhận được điều này sau khi học.

  • Next.js (NextJS)

  • Phát triển web toàn diện

  • Phát triển front-end

  • Phản ứng phát triển

[Sucode] Mọi thứ bạn cần biết về phát triển Next.js trong 3 giờ

Nó chỉ chứa những nội dung cần thiết.

1. Cấu trúc cơ bản và nguyên tắc của Next.js : Hiểu về cấu trúc, hệ thống định tuyến và mô hình thành phần của các dự án Next.js.

2. Kết xuất phía máy chủ (SSR) và Tạo trang web tĩnh (SSG) : Các khái niệm và phương pháp triển khai để kết xuất phía máy chủ và tạo trang web tĩnh trong Next.js.

3. Lấy dữ liệu và định tuyến API : Thực hành nhiều phương pháp lấy dữ liệu và định tuyến API khác nhau bằng Next.js.

4. Hệ thống thiết kế và tạo kiểu : Xây dựng giao diện người dùng hiện đại với CSS-in-JS và TailwindCSS

5. Quản lý cơ sở dữ liệu bằng Prisma : Cách thiết kế lược đồ cơ sở dữ liệu và thực hiện các hoạt động CRUD bằng Prisma, một công cụ ORM.

6. Xác thực người dùng thông qua Authjs : Cách triển khai nhiều phương pháp xác thực khác nhau (ví dụ: Google OAuth, xác thực email/mật khẩu) bằng Authjs.

7. Xây dựng dự án thực tế : Trải nghiệm thực tế trong việc xây dựng và áp dụng các dự án thực tế bằng nhiều công cụ khác nhau, bao gồm Next.js.

  1. Chiến lược tối ưu hóa : bao gồm giảm thời gian tải trang, SEO, tối ưu hóa hình ảnh và nội dung, phân tách mã và tải chậm.
    Các phương pháp tối ưu hóa hiệu suất Next.js, các chiến lược tập trung vào việc sử dụng hiệu quả khả năng hiển thị phía máy chủ và phía máy khách, đồng thời cải thiện tốc độ trang web và trải nghiệm của người dùng.

Tôi giới thiệu điều này cho những người này

Xu hướng phát triển web mới nhất
Những người muốn theo kịp

Trở thành nhà phát triển React
Dành cho những ai muốn mở rộng

Trải nghiệm front-end và back-end
Dành cho những ai muốn có tất cả

Sau giờ học

  • Bạn sẽ thành thạo các khái niệm và tính năng cốt lõi của Next.js.

  • Học các kỹ năng bạn cần để thiết kế và xây dựng các ứng dụng web hiện đại.

  • Bạn sẽ có thể áp dụng Next.js hiệu quả vào các dự án thực tế.


Xin chào, đây là Su 😸 😸

Trong suốt hành trình trở thành một lập trình viên, tôi liên tục học hỏi từ sự đa dạng của mã nguồn và mã code. Tuy nhiên, đôi khi tôi cảm thấy lạc lõng giữa biển thông tin. Trải nghiệm này đã dạy cho tôi một bài học quan trọng: tầm quan trọng của việc xác định những điểm chính trong biển thông tin và truyền đạt chúng một cách rõ ràng.

Tôi rất vui khi được chắt lọc tinh túy của từng chủ đề và truyền đạt một cách súc tích, rõ ràng. Tôi hy vọng khóa học này sẽ giúp bạn hiểu rõ cốt lõi của phát triển và tìm ra định hướng riêng cho mình. Tôi rất mong được kết nối với bạn để cùng nhau học hỏi và phát triển, chia sẻ niềm đam mê của tôi với lĩnh vực này.

Tìm hiểu về những điều này

Mỗi phần đều dựa trên phần trước, được thiết kế để cung cấp hiểu biết toàn diện về Next.js và hệ sinh thái của nó vào cuối loạt bài giảng.

1. Cơ bản về Next.js

Khám phá cốt lõi của Next.js, một framework mạnh mẽ để xây dựng các ứng dụng React được render phía máy chủ. Phần này cung cấp nền tảng vững chắc để chuyển sang các chủ đề nâng cao hơn, dựa trên sự hiểu biết sâu sắc về các nguyên tắc cơ bản.

Các tính năng chính :

  • Cấu trúc dự án : Tìm hiểu cấu trúc chuẩn của một dự án Next.js để phát triển hiệu quả.

  • Định tuyến và Điều hướng : Hiểu hệ thống định tuyến tích hợp và các tuyến đường động.

  • Thành phần máy khách và máy chủ : Khám phá sự khác biệt và tương tác giữa các thành phần phía máy khách và phía máy chủ.

  • Lấy dữ liệu : Nắm vững các chiến lược khác nhau để lấy dữ liệu từ ứng dụng Next.js của bạn.

  • Lưu trữ đệm : Khám phá các kỹ thuật tối ưu hóa hiệu suất thông qua lưu trữ đệm dữ liệu.

  • Kết xuất tĩnh so với kết xuất động : So sánh và triển khai tạo trang web tĩnh (SSG) và kết xuất phía máy chủ (SSR).


2. Kiểu dáng

Khám phá bí quyết tạo kiểu trong Next.js. Phần này tập trung vào việc tạo ra các thiết kế trực quan hấp dẫn và đáp ứng bằng cách sử dụng framework CSS hiện đại.

Các tính năng chính :

  • Kiểu toàn cục : Tìm hiểu cách áp dụng các kiểu toàn cục trên ứng dụng Next.js của bạn.

  • TailwindCSS : Thực hành TailwindCSS để tạo kiểu theo hướng tiện ích.

  • DaisyUI : Triển khai thiết kế dựa trên thành phần bằng DaisyUI, một plugin TailwindCSS.


3. Định tuyến và Điều hướng

Chúng ta sẽ đi sâu vào các khía cạnh nâng cao của định tuyến và điều hướng trong Next.js. Phần toàn diện này bao gồm mọi thứ, từ định tuyến cơ bản đến xử lý lỗi tinh tế.

Các tính năng chính :

  • Tuyến đường và phân đoạn động : Triển khai và quản lý các tuyến đường và phân đoạn động.

  • Tham số chuỗi truy vấn : Sử dụng chuỗi truy vấn để cung cấp nội dung động.

  • Bố cục và Điều hướng : Thiết kế bố cục hiệu quả và hiểu các mẫu điều hướng.

  • Điều hướng theo chương trình : Tìm hiểu cách kiểm soát điều hướng thông qua mã cho các tình huống phức tạp.

  • Tải giao diện người dùng và xử lý lỗi : Tìm hiểu cách tạo giao diện tải và xử lý lỗi 'không tìm thấy' và lỗi không mong muốn một cách khéo léo.


4. API

Tìm hiểu cách xây dựng và quản lý API trong hệ sinh thái Next.js. Phần này hướng dẫn tạo, cập nhật và quản lý bộ sưu tập, bao gồm cả xác thực, bằng Zod.

Các tính năng chính :

  • Hoạt động CRUD : Hiểu toàn bộ vòng đời của một bộ sưu tập: tạo, đọc, cập nhật và xóa.

  • Zod : Sử dụng Zod để định nghĩa lược đồ và xác thực dữ liệu.


5. Prisma

Chúng tôi sẽ tập trung vào các hoạt động CRUD trong Next.js bằng Prisma, một ORM dành cho phát triển hiện đại.

Các tính năng chính :

  • CRUD với Prisma : Thực hiện các thao tác tạo, đọc, cập nhật và xóa bằng Prisma và tích hợp liền mạch với ứng dụng Next.js của bạn.


6. Tải tệp lên

Tìm hiểu cách triển khai tải tệp lên tập trung vào quản lý hình ảnh bằng cách tích hợp Cloudinary.

Các tính năng chính :

  • Tích hợp Cloudinary : Tải tệp chính lên Cloudinary, một dịch vụ đám mây để quản lý hình ảnh và video.


7. Authjs

Khám phá sự phức tạp của xác thực trong Next.js. Phần này trình bày cách triển khai các chiến lược xác thực khác nhau bằng Authjs.

Các tính năng chính :

  • Thiết lập Authjs : Triển khai Authjs để xác thực người dùng.

  • Nhà cung cấp và thông tin xác thực của Google : Tích hợp Google OAuth và các phương pháp xác thực dựa trên thông tin xác thực khác.

  • Bộ điều hợp cơ sở dữ liệu : Tìm hiểu cách sử dụng bộ điều hợp cơ sở dữ liệu để lưu trữ dữ liệu người dùng.


8. Phân phối (Vercel)

Chúng tôi kết thúc hành trình Next.js bằng cách tìm hiểu cách triển khai ứng dụng bằng Vercel, một nền tảng đám mây dành cho các trang web tĩnh và các chức năng không có máy chủ.

Các tính năng chính :

  • Triển khai với Vercel: Hiểu quy trình triển khai ứng dụng Next.js lên Vercel, tìm hiểu các phương pháp hay nhất và những cạm bẫy thường gặp.

Bạn có thắc mắc nào không?

Khóa học Next.js dành cho trình độ lập trình viên nào?

Khóa học này được thiết kế dành cho các lập trình viên từ sơ cấp đến trung cấp có kiến thức cơ bản về phát triển web. Nếu bạn đã có kiến thức cơ bản về HTML, CSS, JavaScript và React, bạn sẽ có được kiến thức chuyên sâu hơn thông qua khóa học này.

Những tính năng chính của Next.js được đề cập trong khóa học là gì?

Khóa học này bao gồm các kiến thức cơ bản về Next.js, kết xuất phía máy chủ (SSR), tạo trang web tĩnh (SSG), định tuyến API, truy xuất dữ liệu và các tính năng nâng cao khác. Khóa học sẽ cung cấp cho bạn kiến thức toàn diện cần thiết để phát triển các ứng dụng web thực tế.

Prisma và Authjs được đề cập đến bao nhiêu?

Khóa học này bao gồm các chủ đề thực tế như quản lý cơ sở dữ liệu và thao tác CRUD bằng Prisma, cũng như triển khai các phương thức xác thực khác nhau bằng Authjs (NextAuth). Thông qua các bài tập thực hành và ví dụ, bạn sẽ học cách áp dụng chúng vào các dự án thực tế.

Khóa học bao gồm những loại dự án thực hành nào?

Khóa học cung cấp nhiều dự án thực hành đa dạng, mang đến cơ hội áp dụng lý thuyết đã học vào thực tế. Các dự án này phản ánh nhu cầu thị trường thực tế, cho phép bạn trực tiếp triển khai những gì đã học trên lớp. Trong các bài giảng dự án tiếp theo, bạn sẽ được áp dụng tất cả các khái niệm Next.js đã học.

Ngoài những kỹ năng kỹ thuật tôi học được từ khóa học, tôi có thể mong đợi những lợi ích bổ sung nào?

Bằng cách tìm hiểu các xu hướng và công nghệ phát triển web mới nhất thông qua khóa học này, bạn có thể củng cố các kỹ năng chuyên môn cần thiết trong thị trường phát triển web hiện nay. Điều này sẽ giúp tăng cường đáng kể khả năng cạnh tranh của bạn trên thị trường việc làm và củng cố hồ sơ năng lực cá nhân.

Những điều cần lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Hệ điều hành và Phiên bản (OS): Windows (10, 11), Node.js v16 trở lên

  • Công cụ được sử dụng: VSCode

  • Các dịch vụ được sử dụng: Next.js, MySQL, Prisma, authjs (nextauth), JSONPlaceholder

Tài liệu học tập và tài liệu tham khảo

  • Chúng tôi cung cấp bản tóm tắt tài liệu khóa học dưới dạng PDF.

  • Chúng tôi sẽ trả lời câu hỏi của bạn sớm nhất có thể!

  • Kiến thức tiên quyết là HTML/CSS, React và JavaScript/TypeScript.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Các nhà phát triển hiểu những điều cơ bản về React

  • Những người muốn phát triển như một nhà phát triển front-end

  • Những người quan tâm đến việc phát triển toàn diện

  • Các nhà phát triển đang tìm cách cải thiện hiệu suất và năng suất

  • Những người muốn cạnh tranh trong việc làm hoặc làm freelancer

  • Các nhóm phát triển doanh nghiệp đang tìm cách hiện đại hóa nền tảng công nghệ của họ

Cần biết trước khi bắt đầu?

  • HTML & CSS

  • JavaScript

  • Phản ứng

  • Bản đánh máy

Xin chào
Đây là

Chương trình giảng dạy

Tất cả

68 bài giảng ∙ (2giờ 52phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!