All 29 Next.js Mistakes Beginners Make

Tóm tắt ngắn:

Video trình bày 29 lỗi thường gặp khi người mới bắt đầu sử dụng Next.js, tập trung vào các khái niệm về thành phần client và server, server actions, suspense, streaming, rendering tĩnh và động.
Các điểm chính bao gồm việc sử dụng đúng directive use client, cấu trúc thành phần client/server, quản lý trạng thái, xử lý dữ liệu (fetch, mutation), dynamic routing, search params, suspense, streaming, rendering tĩnh/động, bảo mật dữ liệu nhạy cảm, và xử lý lỗi. Các công nghệ được đề cập bao gồm React hooks, Context API, Prisma, Zod, Next.js's data cache, và các hàm revalidate trong server actions.
Việc hiểu rõ các khái niệm này giúp tối ưu hiệu suất ứng dụng, cải thiện trải nghiệm người dùng, và đảm bảo bảo mật dữ liệu.
Video hướng dẫn chi tiết các phương pháp xử lý lỗi, ví dụ như sử dụng promise.all cho việc fetch dữ liệu song song, sử dụng Suspense và loading.tsx để xử lý trạng thái tải, và sử dụng server only để hạn chế việc sử dụng các hàm chỉ dành cho server trong client.

Tóm tắt chi tiết:

Video được chia thành các phần chính sau:

Phần 1: Thành phần Client và Server:

Giới thiệu khái niệm thành phần client và server trong Next.js App Router, trong đó mặc định mọi thành phần đều là server component.
Lỗi thường gặp: Đặt use client quá cao trong cây component, dẫn đến các thành phần server bị chuyển thành client component, làm mất đi lợi ích của server component (fetch data trên server, xử lý dữ liệu nhạy cảm).
Giải pháp: Đặt use client ở các thành phần cần tương tác với người dùng (ví dụ: button, input). Giải thích chi tiết về cách thức hoạt động của use client dựa trên import. "The use client directive is like a boundary. Based on the import, everything that is being imported will also become a client component."
Lỗi khác: Không refactor code cho client component, nghĩ rằng component không phải client component nếu không có use client ở đầu file (vì nó có thể được import từ file khác có use client), nghĩ rằng việc wrap server component trong client component sẽ tự động biến nó thành client component.
Giải thích chi tiết về việc server component vẫn có thể hoạt động trong client component nếu sử dụng pattern children.

Phần 2: Quản lý dữ liệu và Server Actions:

Giới thiệu về việc fetch dữ liệu (GET request) trong server component và data mutation (POST, PUT, DELETE) trong server actions. API routes chủ yếu được sử dụng cho webhook.
Lỗi: Sử dụng API routes để fetch dữ liệu thay vì server component, sử dụng use server để tạo server component (thay vì mặc định), rò rỉ dữ liệu nhạy cảm khi truyền dữ liệu từ server component sang client component.
Giải thích về việc server component chỉ chạy trên server, client component chạy trên client nhưng cũng chạy một lần trên server trong quá trình pre-rendering.
Lỗi: Sử dụng State Management trên server-side. Giải thích tại sao điều này không khả thi.
Lỗi: Sử dụng use server để tạo server component (sai, mọi thứ mặc định là server component). Giới thiệu server only để đảm bảo component chỉ chạy trên server.
Lỗi: Không xử lý dữ liệu nhạy cảm khi truyền từ server component sang client component.

Phần 3: Suspense và Streaming:

Giới thiệu về Suspense và Streaming để xử lý trạng thái tải dữ liệu.
Lỗi: Không xử lý trạng thái loading khi fetch dữ liệu, dẫn đến trải nghiệm người dùng kém.
Giải pháp: Sử dụng loading.tsx để hiển thị trạng thái loading trong khi chờ dữ liệu. Giải thích về việc streaming content.
Lỗi: Không sử dụng Suspense một cách granular, dẫn đến việc blocking toàn bộ trang.
Giải pháp: Đặt Suspense boundary ở vị trí chính xác, chỉ bao quanh các thành phần cần chờ dữ liệu.
Lỗi: Quên sử dụng key prop cho Suspense khi làm việc với dynamic data (search params).

Phần 4: Rendering tĩnh và động:

Giới thiệu về static rendering và dynamic rendering. Static rendering tối ưu hơn vì chỉ cần render một lần.
Lỗi: Vô tình làm cho rendering trở nên động (dynamic) do sử dụng các hàm như cookies, headers, hoặc các prop như searchParams.
Giải pháp: Cẩn thận khi sử dụng các hàm và prop này, vì chúng sẽ làm cho rendering trở nên động. Kiểm tra kết quả build để xác định xem các route được render tĩnh hay động.

Phần 5: Bí mật và các hàm tiện ích:

Lỗi: Hardcode secret vào server component hoặc file bên ngoài.
Giải pháp: Sử dụng environment variables (.env.local hoặc .env). Giải thích về việc sử dụng next public để làm cho environment variable có thể truy cập được từ client.
Lỗi: Không phân biệt giữa các hàm tiện ích client-side và server-side.
Giải pháp: Sử dụng server only package để đảm bảo các hàm tiện ích chỉ được sử dụng trên server.

Phần 6: Xử lý lỗi:

Lỗi: Sử dụng hàm redirect trong try-catch block.
Giải pháp: Sử dụng redirect bên ngoài try-catch block để đảm bảo việc redirect hoạt động chính xác.

Tóm lại, video cung cấp một cái nhìn tổng quan và chi tiết về các lỗi thường gặp khi sử dụng Next.js, cùng với các giải pháp và lời khuyên hữu ích cho người mới bắt đầu. Video nhấn mạnh tầm quan trọng của việc hiểu rõ các khái niệm về thành phần client/server, server actions, và các kỹ thuật tối ưu hóa hiệu suất ứng dụng.