강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

Next.js Toàn Tập Chấm (Lồng tiếng Việt)

Khóa học Next.js đầy đủ từ A đến Z! Hoàn thành dự án thực tế với các công nghệ mới nhất như GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, Grafana, v.v. và trải nghiệm cả App Router và Page Router.

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

  • ludgi
Next.js
React
GraphQL
Prisma
AWS

Dịch cái này sang tiếng Việt

  • Sử dụng Next.js App Router

  • Tự động hóa liên kết dữ liệu với GraphQL và TanStack Query

  • Tự động hóa quy trình làm việc GraphQL hiệu quả bằng CLI

  • Quản lý cơ sở dữ liệu với PostgreSQL và Prisma

  • Sử dụng TanStack Query (React Query)

  • React Hook Form và xác thực dữ liệu

  • Quản lý trạng thái với Zustand

  • Lưu trữ dữ liệu bằng Redis

  • Xây dựng hệ thống hàng đợi tin nhắn với RabbitMQ

  • Tự động hóa cấu hình môi trường bằng Docker Compose

  • Thiết kế UI/UX với TailwindCSS và Shadcn

  • Tự động hóa kiểm thử với Cypress

  • Tài liệu hóa các thành phần UI bằng Storybook

  • URL có chữ ký trước của AWS

  • Quản lý phiên bằng Iron Session

  • Quản lý phiên bằng Redis

Khóa học Next.js tập trung vào thực hành với nhiều ví dụ khác nhau 🚀

Bài giảng này không chỉ là một bài giảng lý thuyết đơn thuần. Đây là khóa học thực hành, nơi bạn sẽ tìm hiểu tất cả về các công nghệ web mới nhất thông qua các ví dụ có thể áp dụng trực tiếp vào các dự án thực tế .

  • Dựa trên Next.js và React , chúng tôi sử dụng nhiều ngăn xếp công nghệ thực tế như GraphQL, Prisma, TanStack Query, Redis và RabbitMQ.

  • Mọi nhiệm vụ phức tạp đều được tự động hóa! Bạn có thể thiết lập một bộ trình phân giải GraphQL và tích hợp API chỉ trong vài giây bằng công cụ CLI của chúng tôi.

  • Trải nghiệm mọi thứ từ thiết lập môi trường phát triển bằng Docker Compose đến triển khai đám mây bằng AWS.

  • Nó bao gồm toàn diện các yếu tố cốt lõi của dịch vụ web , bao gồm xử lý dữ liệu thời gian thực, quản lý phiên (Iron Session), SSR và tối ưu hóa SEO.

Nếu bạn cảm thấy chán các hướng dẫn đơn giản, hãy thử trải nghiệm thực tế bằng cách triển khai các tính năng sẵn sàng đưa vào sản xuất dựa trên nhiều ví dụ khác nhau . Sau khi hoàn thành khóa học, bạn sẽ tự tin xử lý được một loạt công nghệ toàn diện có thể áp dụng ngay vào công ty khởi nghiệp của mình!

  • 💡 Khóa học này tập trung vào việc tìm hiểu về công nghệ và quy trình làm việc cần thiết trong môi trường khởi nghiệp cho các dự án dựa trên Next.js (15+) và React (19) . Đặc biệt, nó cung cấp nhiều công nghệ và phương pháp phát triển hiệu quả có thể áp dụng ngay vào thực tế.

    • Bối cảnh lập kế hoạch
      Trong môi trường khởi nghiệp, bạn cần chuẩn bị sản phẩm để đưa vào sản xuất nhanh chóng. Khóa học này bao gồm tự động hóa thông qua các công cụ CLI , tích hợp GraphQL và TanStack Queryxử lý dữ liệu thời gian thực với Redis và RabbitMQ để đáp ứng các nhu cầu này.
      Nó được thiết kế sao cho ngay cả những kỹ năng phức tạp cũng có thể được học từng bước thông qua các bài tập đơn giản và rõ ràng.

    • Công cụ và kỹ thuật được sử dụng
      Chúng tôi sử dụng nhiều ngăn xếp thực tế khác nhau như Next.js (15+), React (19), Prisma, Docker Compose, GraphQL, TanStack Query, Redis, RabbitMQ, Iron Session, v.v.

    • Sự cân bằng giữa lý thuyết và thực hành
      Bài giảng này không chỉ là một bài giảng lý thuyết đơn thuần. Nó được thiết kế để giúp bạn dễ dàng triển khai các chức năng có thể sử dụng trong sản xuất thực tế và giúp bạn học các từ khóa cốt lõi để có thể tự tin sử dụng chúng trong thực tế.

      Ngày nay, các công cụ AI như ChatGPT có thể giúp bạn cải thiện các tác vụ phức tạp chỉ bằng những từ khóa mà bạn đã biết. Vì vậy, khóa học này tập trung vào việc tìm ra những điều bạn không biết và học các từ khóa bạn cần .
      Kiến thức và dự án bạn có được thông qua các bài giảng sẽ ở mức đủ sức cạnh tranh trong lĩnh vực này và bạn sẽ có thể đạt được những kết quả tương đương với những kết quả bạn tạo ra trong sản phẩm của mình .

    • Khó khăn
      Khóa học này dành cho người học ở trình độ trung cấp hoặc cao hơn, có kiến ​​thức cơ bản về React và TypeScript.
      Tuy nhiên, chúng tôi đã cấu trúc nó sao cho bạn có thể hiểu bằng cách làm theo các ví dụ từng bước ngay cả khi bạn không có bất kỳ kinh nghiệm thực tế nào.

Các tính năng của khóa học này

📌 Tìm hiểu một công nghệ có thể áp dụng ngay vào thực tế thông qua nhiều ví dụ khác nhau.
Chúng tôi chia sẻ các công nghệ và quy trình làm việc có thể tối đa hóa hiệu quả và năng suất cần thiết trong môi trường khởi nghiệp.

📌 Tối đa hóa khả năng tự động hóa và năng suất bằng CLI.
Tự động tạo một bộ trình phân giải GraphQL và tích hợp API, giúp bạn dễ dàng duy trì cấu trúc mã tuân theo các quy ước.

📌 20% lý thuyết, 80% thực hành.
Tôi tự mình viết toàn bộ mã, tập trung vào các dự án ở cấp độ sản xuất và xác minh rằng nó hoạt động như mong đợi.

📌 Cấu hình có thể sử dụng ngay trong các dịch vụ thực tế.
Dựa trên Next.js (15+) và React (19), bạn sẽ tìm hiểu các công nghệ được sử dụng rộng rãi trong các công ty khởi nghiệp và thực tế, chẳng hạn như Redis, RabbitMQ, Prisma và Docker Compose.

📌 Khóa học này dành cho người học ở trình độ trung cấp.
Cần có hiểu biết cơ bản về React và TypeScript. Sự tiến bộ không khó. Chúng tôi giúp bạn nhận ra những điều bạn “không biết”.

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

1. Giới thiệu bài giảng
Chúng tôi trình bày các dự án thực tế sử dụng Next.js và công nghệ mới nhất. Mô tả mục tiêu của khóa học và các giá trị cốt lõi mà người học sẽ đạt được.

2. Cấu hình môi trường
Tìm hiểu cách sử dụng Docker Compose để thiết lập môi trường phát triển tích hợp và tìm hiểu cấu trúc dự án có thể cải thiện tinh thần làm việc nhóm và năng suất.

3. Prisma và Quản lý dữ liệu
Bạn sẽ học cách thiết lập cơ sở dữ liệu bằng Prisma, quản lý dữ liệu bằng npx prisma studio và tìm hiểu các kỹ thuật cập nhật và trực quan hóa dữ liệu thường được sử dụng trong thực tế.

4. Truy vấn GraphQL, đột biến và dữ liệu thời gian thực
Tự động tạo trình phân giải GraphQL, viết truy vấn và đột biến, đồng thời triển khai giao dịch và tích hợp dữ liệu với CLI. Chúng tôi cũng xử lý dữ liệu theo thời gian thực bằng cách đăng ký.

5. Ví dụ về biểu mẫu React Hook
Quản lý và xác thực dữ liệu biểu mẫu bằng React Hook Form, tự động xác thực bằng cách tích hợp với Zod và tối đa hóa hiệu quả xử lý biểu mẫu.

6. Quản lý trạng thái sử dụng Zustand
Tìm hiểu phương pháp quản lý trạng thái đơn giản và nhẹ nhàng bằng Zustand và tìm hiểu cách quản lý trạng thái toàn cầu hiệu quả bằng cách sử dụng phương pháp này trong thực tế.

7. Ví dụ truy vấn TanStack
Tìm hiểu cách xử lý hiệu quả việc quản lý trạng thái máy chủ trong các ứng dụng React. Bao gồm các tính năng nâng cao như useQuery , useMutation , Pagination và Optimistic Update.

8. Triển khai các hàm CRUD
Chúng ta sẽ tìm hiểu cách triển khai Create, Read, Update và Delete từng bước bằng Prisma, GraphQL và TanStack Query, cũng như cách sử dụng chúng trong thực tế.

9. Thực hành Redis và RabbitMQ
Chúng tôi sẽ trình bày những kiến ​​thức cơ bản về xây dựng hệ thống lưu trữ đệm dữ liệu bằng Redis và hệ thống hàng đợi tin nhắn bằng RabbitMQ.

10. Quản lý phiên: Xác thực bằng Iron Session và Redis
Chúng tôi thực hiện bảo trì phiên phía máy khách bằng cách sử dụng Iron Session dựa trên cookie và quản lý phiên phía máy chủ bằng cách sử dụng Redis tập trung vào máy chủ.

11. Next.js + Prometheus + Grafana: Giám sát dễ dàng và nhanh chóng
Tìm hiểu cách thu thập và trực quan hóa số liệu bằng Prometheus và Grafana. Tìm hiểu cách xây dựng môi trường bằng container Docker và giám sát dữ liệu bằng cách liên kết Prometheus và Grafana. Ngoài ra, chúng tôi sẽ tiến hành kiểm tra tải API đơn giản bằng JMeter.

12. URL được chỉ định trước và tích hợp CloudFront
Bao gồm việc tải lên và truy cập tệp an toàn bằng cách sử dụng URL được chỉ định trước. Từ việc thiết lập thùng S3 đến quản lý nhóm người dùng, thiết lập chính sách và CORS và liên kết tên miền GoDaddy với AWS Route 53. Ngoài ra, bạn sẽ học cách cấp chứng chỉ SSL, tích hợp với CloudFront, thiết lập tên miền phụ, sử dụng chiến lược lưu trữ đệm và xử lý việc vô hiệu hóa bộ đệm.

13. Phần thưởng: Storybook & Kiểm tra E2E
Tìm hiểu cách lập tài liệu và kiểm tra các thành phần UI bằng Storybook và thực hành kiểm tra E2E bằng Cypress.

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

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


Các bài giảng được thực hiện trong môi trường Windows , nhưng bạn có thể theo dõi mà không gặp vấn đề gì trên MacOS hoặc Linux. Nếu bạn đã cài đặt Docker , bạn có thể thực hiện hầu hết các bài tập bất kể hệ điều hành của bạn là gì.

Vui lòng chuẩn bị những thông tin sau cho bài giảng:

  • Docker : Docker là cần thiết để thiết lập môi trường phát triển. Vui lòng tham khảo tài liệu chính thức để biết hướng dẫn cài đặt.

  • Trình biên tập mã :

    • Cursor AI : Công cụ được khuyến nghị tốt nhất để hỗ trợ lập trình và giải quyết vấn đề nhanh chóng. Đây là trình soạn thảo mã được khuyến nghị nhiều nhất cho khóa học này, đặc biệt là vì nó có thể tối đa hóa năng suất của bạn.

    • Visual Studio Code (VS Code) : Nếu bạn không có Cursor AI, bạn có thể theo dõi nội dung bài giảng mà không gặp khó khăn gì khi sử dụng VS Code.

  • Dịch vụ LLM (ChatGPT, Claude, v.v.) : Tôi thực sự khuyên bạn nên đăng ký một hoặc nhiều dịch vụ LLM để giúp bạn viết mã và khắc phục sự cố trong thời gian thực tập.

Tài liệu học tập

  • Một dự án cơ bản được cung cấp kèm theo bài giảng và được chia sẻ qua liên kết GitHub. Bạn có thể tải xuống các tài liệu cần thiết và sử dụng chúng cho việc thực hành của mình. 😊

Kiến thức và ghi chú của người chơi
Khóa học này được thiết kế dành cho các nhà phát triển trung cấp và khuyến nghị những kiến ​​thức tiên quyết sau để học tập suôn sẻ:

  • Hiểu JavaScript và TypeScript cơ bản

    • Nếu bạn có kinh nghiệm sử dụng cú pháp ES6+ và TypeScript cơ bản, việc học sẽ dễ dàng.

  • Kinh nghiệm cơ bản khi sử dụng React

    • Nếu bạn quen thuộc với cấu trúc thành phần, Props và Hooks cơ bản, bạn sẽ thấy dễ dàng hơn khi thực hiện các bài tập.

  • Kiến thức cơ bản về GraphQL

    • Nếu bạn biết các cấu trúc truy vấn và đột biến cơ bản của GraphQL, bạn có thể tối đa hóa hiệu quả học tập.

  • Kiến thức cơ bản về SQL và cơ sở dữ liệu

    • Nếu bạn hiểu cách viết các truy vấn SQL cơ bản và cách cơ sở dữ liệu hoạt động, bạn có thể dễ dàng học cách tích hợp Prisma với GraphQL.

  • Cài đặt Docker và trải nghiệm sử dụng đơn giản

    • Vì bài viết này bao gồm việc thiết lập môi trường phát triển bằng Docker Compose nên bạn hãy làm quen với cách cài đặt Docker và cách sử dụng cơ bản.

  • Kinh nghiệm sử dụng các công cụ hỗ trợ mã hóa (Mô hình ngôn ngữ lớn, LLM) (tùy chọn)

    • Nếu bạn có kinh nghiệm sử dụng các công cụ AI như ChatGPT, Claude hoặc Cursor AI, bạn sẽ thấy rằng việc giải quyết vấn đề và tiến triển thực tế sẽ nhanh hơn và hiệu quả hơn.

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

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

  • Dành cho những ai muốn hoàn thành dự án thực tế bằng Next.js và React

  • Những ai muốn học các stack công nghệ phù hợp với môi trường startup

  • Dành cho những ai muốn tự động hóa các tác vụ lặp đi lặp lại và tăng năng suất

  • Những ai muốn trải nghiệm triển khai lên đám mây.

  • Người muốn trở thành nhà phát triển toàn diện, bao gồm cả máy chủ và máy khách.

  • Những ai muốn học các kỹ năng có thể áp dụng trực tiếp vào công việc thực tế

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

  • Kiến thức cơ bản về HTML, CSS

  • Hiểu các quy tắc cú pháp cơ bản của JavaScript

  • Kiến thức cơ bản về React

  • Kiến thức cơ bản về Next.js

  • Hiểu cơ bản về TypeScript

Xin chào
Đây là

462

Học viên

19

Đánh giá

8

Trả lời

4.1

Xếp hạng

7

Các khóa học

안녕하세요, 주식회사 럿지의 대표입니다.


저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

 

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.


특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

 

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

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

Tất cả

56 bài giảng ∙ (3giờ 49phút)

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!

358.730 ₫

Khóa học khác của ludgi

Hãy khám phá các khóa học khác của giảng viên!

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!