Cấu hình Nginx reverse proxy cho Next.js: cache asset, nén gzip, giới hạn request và những lỗi timeout thường gặp khi chạy trên VPS nhỏ.
Next.js tự phục vụ được HTTP, nhưng đặt Nginx phía trước vẫn đáng làm: SSL, nén, cache asset tĩnh và rate limit đều rẻ hơn khi làm ở tầng Nginx thay vì trong Node.
Node xử lý mỗi request bằng event loop đơn luồng. Mỗi byte asset tĩnh mà nó phải đẩy ra là thời gian event loop không dùng để render trang.
server {
listen 80;
server_name yourdomain.com;
location /_next/static/ {
proxy_pass http://127.0.0.1:3000;
Đặt câu hỏi, chia sẻ ý kiến hoặc góp ý giải pháp kỹ thuật cùng cộng đồng.
Khám phá tiếp
Nổi bậtHướng dẫn xây dựng cache layer với Redis cho API và Server Components: xử lý cache stampede, eviction policy và cơ chế invalidate dữ liệu realtime.
Nổi bậtHướng dẫn toàn diện về Server Actions trong Next.js 15: xử lý form, validate dữ liệu với Zod, quản lý optimistic updates và bảo mật mutation.
Phần được tô sáng là điểm ăn tiền: file trong /_next/static/ có hash trong tên, nên đổi nội dung là đổi luôn URL. Cache vĩnh viễn hoàn toàn an toàn.
sudo nginx -t
sudo systemctl reload nginx
curl -I https://yourdomain.com/_next/static/chunks/main.jsnginx -t là bước không được bỏ. Reload với config sai sẽ giữ nguyên tiến trình cũ, nhưng restart thì làm sập site.
| Triệu chứng | Nguyên nhân thường gặp |
|---|---|
| 502 Bad Gateway | App chưa chạy, hoặc sai port trong proxy_pass |
| 504 Gateway Timeout | proxy_read_timeout quá ngắn so với route render chậm |
| Mất IP thật của khách | Thiếu proxy_set_header X-Forwarded-For |
| WebSocket đứt | Thiếu header Upgrade và Connection |
Cấu hình trên đủ cho một site đọc nhiều ghi ít. Khi lưu lượng tăng, bước tiếp theo là bật proxy_cache cho HTML của trang tĩnh — nhưng chỉ làm sau khi đã đo, không làm theo cảm tính.