Chia Sẻ Khóa Học Next.js Qua Ví Dụ [Update Tháng 5-2022] [Khóa 7859 A]
Phát triển các static website và hybrid (static+SSR) web app với React và Next.js 12, bao gồm Tailwind CSS, React Query.
Bạn sẽ học được gì:
- ✓ Phát triển các ứng dụng web với Next.js.
- ✓ Style components với styled-jsx hoặc Tailwind CSS.
- ✓ Xây dựng các static website hoặc hybrid (static + SSR) app.
- ✓ Fetch data từ một remote API, chẳng hạn như Headless CMS.
- ✓ Triển khai xác thực JWT dựa trên cookie.
- ✓ Cache data với React Query.
Được mô tả là “React Framework for Production”, Next.js giúp bạn dễ dàng xây dựng các ứng dụng web được tối ưu hóa cao trong React.
Khóa học này sẽ hướng dẫn bạn học Next.js bằng cách phát triển hai ví dụ: một website hoàn toàn tĩnh và một hybrid (static + server-side rendered) app.
Ví dụ đầu tiên, một website blog cá nhân, sẽ giới thiệu cho bạn các khái niệm nền tảng của Next.js như pre-rendering, file-system based routing, và hydration.
Nó sẽ chỉ cho bạn cách load data trong các trang được tạo tĩnh tại thời điểm xây dựng và cách tạo kiểu cho các trang của bạn trong các tệp global CSS hoặc với thư viện styled-jsx cung cấp các component-scoped style.
Phần Triển khai sẽ trình bày cho bạn tất cả các tùy chọn để chạy ứng dụng của bạn trong production, từ các nền tảng fully-managed serverless như Vercel đến cấu hình Linux server của riêng bạn.
Ví dụ thứ hai bạn sẽ phát triển là một shop website. Đây sẽ là một ứng dụng phức tạp hơn tải dữ liệu của nó từ một Headless CMS (Strapi) và sử dụng các tính năng Next.js nâng cao như Incremental Static Regeneration để tự động phản ánh các thay đổi trong backend data.
Nó sẽ chỉ cho bạn cách enable TypeScript support trong một dự án Next.js nếu bạn muốn làm như vậy. Sử dụng TypeScript là tùy chọn; tất cả trừ một trong số các video sử dụng JavaScript thuần túy. Nhưng bạn sẽ tìm thấy code TypeScript đầy đủ cho ví dụ shop trong GitHub repository nếu bạn thích TypeScript.
Website sẽ sử dụng thư viện Tailwind CSS phổ biến để tạo kiểu và Next Image component để tối ưu hóa hình ảnh.
Bạn sẽ thấy các cách khác nhau để load data từ một external API, bao gồm viết API routes của riêng bạn trong Next.js và cách chọn phương pháp tốt nhất cho các yêu cầu cụ thể của bạn.
Ví dụ này sẽ bao gồm một hệ thống xác thực an toàn dựa trên JWT và cookies, và React Query library sẽ được sử dụng cho caching data ở client side.
Mã nguồn đầy đủ cho tất cả các ví dụ được cung cấp, với một cách dễ dàng để xem những thay đổi được thực hiện trong mỗi bài giảng.
Khóa học được cập nhật với phiên bản Next.js mới nhất tức là 12.
Mục lục:
- ✓ 01. Bắt đầu.
- ✓ 02. Routing và Navigation.
- ✓ 03. Styling.
- ✓ 04. Loading Data.
- ✓ 05. Client-side Functionality.
- ✓ 06. Deployment.
- ✓ 07. Next Shop Setup.
- ✓ 08. Data Fetching.
- ✓ 09. Responsive Design và Image Optimization.
- ✓ 10. Authentication.
- ✓ 11. React Query.
- ✓ 12. Shopping Cart (Bài tập).
Khóa học này dành cho ai:
- ✓ Các React/Web developer muốn xây dựng các ứng dụng static hoặc hybrid (static + SSR) web với Next.js.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU