Next.js 15: Phát triển Full-Stack

Next.js là lựa chọn tối ưu để xây dựng ứng dụng quy mô lớn với React.

Hướng phát triển của React đang thoát khỏi cách thức chỉ hoạt động trên trình duyệt truyền thống để dần dần hoạt động theo cách tích hợp với hoạt động phía server. Next.js là framework hỗ trợ chắc chắn nhất cho hướng đi mà React đang theo đuổi.

Ban đầu Next.js chỉ cho cảm giác đơn giản là việc xử lý routing thuận tiện, nhưng khi thiết kế dựa trên các component hoạt động trên server thì Next.js là phù hợp nhất để tạo ra các ứng dụng quy mô lớn.

Lý do tôi tạo ra khóa học này

React được thiết kế để chỉ hoạt động trong trình duyệt, nhưng Next.js có thể hoạt động trên cả server side và trình duyệt, do đó cần có phương pháp tiếp cận mới. Để tận dụng Next.js một cách hiệu quả, cần có phương pháp phát triển phù hợp với nó.

Khóa học này được tạo ra với mục tiêu giúp bạn trải nghiệm Next.js trong thời gian tối thiểu và phát triển khả năng đưa ra quyết định phù hợp. Sau khi hoàn thành khóa học này, khi ai đó hỏi bạn 'Bạn sẽ dùng React hay Next.js?', mục tiêu là bạn sẽ trả lời 'Next.js'.

Cấu hình hệ thống ví dụ

Các ví dụ trong khóa học được viết với cấu trúc tách riêng API server để có thể mở rộng trong tương lai. API server sẽ chạy bằng cách sử dụng code được tạo cho từng chức năng riêng biệt, và Next.js sẽ sử dụng API server này. Next.js server sẽ xử lý dữ liệu ở phía server và được cấu trúc sao cho browser không thể trực tiếp sử dụng API server, tạo ra hình thức gần giống với thực tế nhất có thể.

Công nghệ sử dụng trong khóa học

Backend (được cung cấp như tài liệu học tập và không bao gồm trong nội dung bài giảng.)

• Spring Boot

• JPA

• RestController

• JWT

FrontEnd

• Next.js 15 (Viết bằng JavaScript và TypeScript được cung cấp làm tài liệu học tập.)

• NextAuth

• SWR

Next.js 15

Những thay đổi trong cách định tuyến của Next.js 13 trở về sau, sự xuất hiện của React Server Component, Server Action và nhiều thay đổi khác trong Next.js 15. Nếu tận dụng tốt những tính năng này, bạn có thể triển khai các chức năng đa dạng nhanh hơn so với việc phát triển bằng React truyền thống.

Chậm rồi Nhanh

Chúng ta cần suy nghĩ về phương pháp học tập.

• Những suy nghĩ lý thuyết là - 'SLOW'

• JavaScript để tạo nhanh nhất có thể - 'FAST'

• Thiết kế tối giản, xử lý nhanh chóng bằng AI - 'FAST'

• Máy chủ API được cung cấp bằng mã nguồn - 'FAST'

Các ví dụ và nội dung được tạo trong bài gi강

Ví dụ Todo: Làm chủ CRUD và phân trang với App Routing

• Tạo ví dụ Todo sử dụng App Routing

• Xử lý định tuyến và component trang

• Học về xử lý layout và loading, xử lý lỗi, v.v.

  
  

  
  

  

  
  

Quản lý sản phẩm: Cách tối ưu hóa đồng thời hiệu suất và SEO với SSG/ISR

• Tạo trang tĩnh sử dụng SSG

• Trang được cập nhật tự động theo chu kỳ (ISR)

• Tách biệt chức năng tìm kiếm

Xử lý xác thực: Hoàn hảo với JWT token bằng NextAuth!

• Xử lý xác thực nội bộ và xác thực mạng xã hội (kakao)

• JWT xử lý và sử dụng xác thực trong component

• Máy chủ API và phương pháp tự động gia hạn Access Token, Refresh Token

• Trang đăng nhập/đăng xuất tùy chỉnh

Duy trì trạng thái: Quản lý dữ liệu giỏ hàng hiệu quả với SWR

• Phương pháp phát triển tập trung vào client trong Next.js

• Xử lý các tuyến đường có thể gọi trong Next.js

• Cách chia sẻ dữ liệu server sử dụng SWR giữa nhiều component