next-best-practices

Tổng quan

next-best-practices là gì?

next-best-practices là một kỹ năng toàn diện dành cho các nhà phát triển frontend làm việc với Next.js. Nó cung cấp các best practice và mẫu thực tiễn để xây dựng các ứng dụng Next.js có khả năng mở rộng và dễ bảo trì. Bao quát từ quy ước file và ranh giới React Server Component (RSC) đến lấy dữ liệu bất đồng bộ, xử lý lỗi và tối ưu hóa, kỹ năng này giúp bạn tránh các sai sót phổ biến và áp dụng các quy trình làm việc hiện đại của Next.js.

Ai nên sử dụng kỹ năng này?

• Các nhà phát triển frontend sử dụng Next.js và React
• Các nhóm đang chuyển sang sử dụng Next.js App Router
• Bất kỳ ai muốn áp dụng hoặc học các quy ước Next.js mới nhất

Kỹ năng này giải quyết những vấn đề gì?

• Làm rõ cấu trúc file và thư mục cho các dự án Next.js lớn
• Hướng dẫn cách sử dụng đúng Server và Client Components
• Giải thích các mẫu dữ liệu bất đồng bộ và cách chuyển đổi cho Next.js 15+
• Giúp ngăn ngừa các lỗi bundling và runtime phổ biến
• Cung cấp chiến lược xử lý lỗi và gỡ lỗi hiệu quả

Khi nào nên dùng next-best-practices?

• Khi bắt đầu dự án Next.js mới hoặc tái cấu trúc dự án hiện có
• Khi đào tạo thành viên mới về các quy ước Next.js
• Khi khắc phục sự cố liên quan đến lấy dữ liệu, routing hoặc bundling

Cách sử dụng

Các bước cài đặt

1. Thêm kỹ năng vào dự án của bạn bằng lệnh:

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. Mở file SKILL.md để xem tổng quan và các liên kết đến hướng dẫn chi tiết.
3. Xem qua các file hỗ trợ cho các chủ đề cụ thể:
   • file-conventions.md: Tìm hiểu về cấu trúc dự án, phân đoạn route và các file đặc biệt.
   • rsc-boundaries.md: Hiểu các mẫu React Server Component hợp lệ và không hợp lệ.
   • async-patterns.md: Chuyển đổi sang API async mới cho params, cookies và headers.
   • data-patterns.md: Lựa chọn chiến lược lấy và thay đổi dữ liệu phù hợp.
   • error-handling.md: Triển khai error boundaries và xử lý ngoại lệ điều hướng.
   • bundling.md: Khắc phục sự cố bundling với các gói bên thứ ba.
   • directives.md: Sử dụng các directive của React và Next.js như 'use client', 'use server', và 'use cache'.
   • debug-tricks.md: Tăng tốc gỡ lỗi với công cụ phát triển Next.js và các endpoint.

Điều chỉnh cho dự án của bạn

• Sử dụng các mẫu được cung cấp làm tham khảo và điều chỉnh cho phù hợp với kho mã, công cụ và môi trường triển khai của bạn.
• Không sao chép mã nguyên văn — hãy xem xét từng mẫu để đảm bảo tương thích với stack và phiên bản Next.js của bạn.

Các chủ đề chính bao gồm

• Quy ước file và cấu trúc dự án
• Ranh giới RSC và mẫu component
• Lấy dữ liệu bất đồng bộ và chuyển đổi
• Route handlers và lựa chọn runtime
• Error boundaries và xử lý lỗi toàn cục
• Tối ưu hóa hình ảnh và font chữ
• Bundling và tách phụ thuộc bên ngoài
• Gỡ lỗi và công cụ phát triển

Câu hỏi thường gặp

Làm sao để xem trước nội dung của next-best-practices?

Sau khi cài đặt, mở tab Files để duyệt tất cả các hướng dẫn bao gồm SKILL.md, async-patterns.md, bundling.md và nhiều hơn nữa. Mỗi file tập trung vào một best practice cụ thể của Next.js.

next-best-practices có dành riêng cho phiên bản Next.js nào không?

Kỹ năng được cập nhật cho Next.js 15+ và bao gồm các bước chuyển đổi cho API async và quy ước mới. Một số mẫu có thể không áp dụng cho các phiên bản cũ hơn.

Tôi có thể dùng next-best-practices với các thiết lập tùy chỉnh không?

Có, nhưng hãy xem xét từng mẫu để đảm bảo tương thích với cấu hình tùy chỉnh của bạn, đặc biệt là về routing, runtime server và bundling.

Nếu tôi cần thêm chi tiết về một chủ đề cụ thể thì sao?

Mỗi file chủ đề đều có ví dụ thực tế và tham chiếu đến tài liệu chính thức của Next.js hoặc React để bạn học sâu hơn.

Tôi có thể tìm trợ giúp ở đâu nếu gặp sự cố?

Xem file debug-tricks.md để biết các mẹo gỡ lỗi nâng cao, hoặc tham khảo tài liệu chính thức của Next.js được liên kết trong các file kỹ năng.