10 lỗi thường gặp khi deploy Next.js lên production
Tổng hợp các vấn đề phổ biến nhất khi đưa ứng dụng Next.js từ local lên server thật và cách xử lý nhanh chóng.
Sau khi deploy hơn 50 dự án Next.js cho khách hàng, mình rút ra được 10 lỗi mà 90% developer mới thường gặp.
1. **Environment variables không được đọc trên server**: Hãy đảm bảo bạn dùng đúng prefix NEXT_PUBLIC_ cho biến client-side, và set đúng env trên Vercel/AWS.
2. **Image domain chưa khai báo**: Lỗi 'Invalid src prop on next/image' xảy ra khi bạn quên thêm domain vào next.config.js.
3. **API routes timeout**: Vercel giới hạn 10 giây cho hobby plan và 60 giây cho pro. Hãy tách logic dài thành background job hoặc dùng streaming.
4. **Bundle size quá lớn**: Dùng @next/bundle-analyzer để soi từng chunk. Tránh import toàn bộ thư viện như lodash.
5. **Hydration mismatch**: Đừng dùng Date.now(), Math.random() hay typeof window trực tiếp trong component. Dùng useEffect.
6. **Database connection leak**: Trong serverless, mỗi function instance là độc lập. Hãy dùng connection pooler như PgBouncer hoặc Prisma Accelerate.
7. **Caching sai cách**: Hiểu rõ ISR, dynamic routes và revalidate. Đừng cache personalized data!
8. **CORS issue**: Khi gọi API từ domain khác, set headers đúng cách hoặc dùng Next.js API như proxy.
9. **SEO meta tags thiếu**: Dùng Metadata API mới của App Router để generate đúng OG tags, twitter card.
10. **Memory leak với event listener**: Luôn cleanup trong useEffect return function.