All 29 Next.js Mistakes Beginners Make

Tóm tắt ngắn:

Video giới thiệu 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, và rendering tĩnh/động.
Các điểm chính bao gồm cách sử dụng đúng use client, quản lý trạng thái ở phía client, xử lý dữ liệu với server components và server actions, tránh rò rỉ dữ liệu nhạy cảm, giải quyết lỗi hydration, sử dụng suspense và streaming hiệu quả, xử lý dynamic routes và search params, quản lý secret và các utility functions, cũng như sử dụng redirect một cách chính xác.
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, bảo mật dữ liệu, và cải thiện trải nghiệm người dùng.
Video trình bày chi tiết các ví dụ minh họa và giải pháp cho từng lỗi, bao gồm cả việc sử dụng các công cụ như server only, Zod, và revalidate.

Tóm tắt chi tiết:

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

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

Video bắt đầu bằng một ví dụ đơn giản về trang chủ với thành phần server và client, giải thích sự khác biệt giữa chúng. Thành phần server chạy trên server, có thể thực hiện fetch dữ liệu trực tiếp; thành phần client chạy trên trình duyệt, cho phép tương tác với người dùng.
Lỗi thường gặp nhất là đặt use client quá cao trong cây thành phần, dẫn đến các thành phần server bị chuyển thành client, làm giảm hiệu suất. Người thuyết trình nhấn mạnh việc đặt use client ở các thành phần cần tương tác trực tiếp với người dùng.
Video cũng giải thích rằng việc gói một thành phần server trong thành phần client không tự động biến nó thành thành phần client. Việc chuyển đổi phụ thuộc vào cơ chế import.
Video nhấn mạnh tầm quan trọng của việc không sử dụng quản lý trạng thái (state management) ở phía server.

Phần 2: Lấy và Cập nhật Dữ liệu:

Video giải thích cách lấy dữ liệu (GET requests) tốt nhất là trong server components và cập nhật dữ liệu (POST, PUT, DELETE requests) nên được thực hiện trong server actions. API routes không còn cần thiết cho các tác vụ này nữa.
Lỗi thường gặp là sử dụng route handlers để lấy dữ liệu thay vì server components. Video minh họa cách lấy dữ liệu trực tiếp từ database trong server component.
Video giải thích rằng việc lấy dữ liệu nhiều lần ở nhiều nơi trong ứng dụng không phải là vấn đề, vì React và Next.js có cơ chế caching. Việc sử dụng Promise.all hoặc Promise.allSettled để thực hiện fetch song song được đề cập đến.
Lỗi "waterfall effect" khi fetch dữ liệu tuần tự được giải thích và cách khắc phục bằng việc fetch song song được trình bày.

Phần 3: Server Actions và Bảo mật:

Video giới thiệu server actions như một cách hiệu quả để xử lý data mutations. use server được sử dụng để tạo server action, không phải để tạo server component.
Lỗi thường gặp là quên validate và bảo vệ server actions, vì chúng tương tự như API endpoints và có thể bị truy cập trái phép. Video đề cập đến việc sử dụng Zod để validate dữ liệu và thực hiện kiểm tra xác thực người dùng.
Video nhấn mạnh rằng server actions có thể được sử dụng trong cả server components và client components.
Lỗi quên sử dụng revalidate trong server actions để làm mới cache sau khi cập nhật dữ liệu được giải thích.

Phần 4: Dynamic Routes, Suspense và Streaming:

Video giải thích về dynamic routes và cách truy cập params và search params. Params được truy cập thông qua params prop trong page components, search params thông qua searchParams prop.
Lỗi thường gặp khi làm việc với search params là việc sử dụng searchParams prop trong server components, dẫn đến cần thiết phải gửi request đến server mỗi khi search params thay đổi. Việc sử dụng useSearchParams hook được đề cập đến như một giải pháp thay thế, nhưng đòi hỏi phải chuyển thành phần thành client component.
Suspense và streaming được giới thiệu như một cách để xử lý loading states một cách hiệu quả. Sử dụng loading.tsx để hiển thị loading state trong khi chờ dữ liệu được tải.
Video nhấn mạnh tầm quan trọng của việc đặt suspense boundary ở vị trí chính xác và sử dụng key prop để đảm bảo suspense được trigger lại khi dữ liệu thay đổi.

Phần 5: Rendering Tĩnh và Động:

Video giải thích sự khác biệt giữa static rendering và dynamic rendering. Static rendering tối ưu hơn vì chỉ cần render một lần, dynamic rendering phải render lại mỗi khi có request.
Lỗi thường gặp là vô tình chuyển sang dynamic rendering khi sử dụng các hàm như cookies, headers, hoặc các thư viện authentication. Video khuyến nghị kiểm tra kỹ các thành phần và thư viện để tránh việc này.

Phần 6: Secret và Utility Functions:

Video cảnh báo về việc hardcode secret vào server components. Khuyến nghị sử dụng environment variables và sử dụng next/server để đảm bảo secret chỉ được sử dụng trên server.
Lỗi thường gặp là không phân biệt giữa utility functions dành cho client và server. Sử dụng server only package để đảm bảo utility functions chỉ được sử dụng trên server.

Phần 7: Sử dụng redirect:

Video giải thích lỗi khi sử dụng hàm redirect trong try-catch block. Hàm redirect sẽ throw error, nên việc sử dụng nó trong try-catch sẽ không dẫn đến redirect như mong muốn. Việc sử dụng redirect bên ngoài try-catch được khuyến nghị.

Tóm lại, video cung cấp một hướng dẫn toàn diện về các lỗi thường gặp khi sử dụng Next.js, kèm theo các giải pháp và ví dụ minh họa cụ thể, giúp người xem hiểu rõ hơn về các khái niệm và kỹ thuật lập trình trong Next.js.