Bạn phục vụ các static asset trong Next.js như thế nào?

Question

Accepted Answer

Next.js phục vụ các file tĩnh (hình ảnh, font, icon, PDF, robots.txt) từ thư mục đặc biệt public/ ở root của project.

Thư mục public ánh xạ tới gốc URL

text

public/
  logo.png          → served at  /logo.png
  favicon.ico       → served at  /favicon.ico
  docs/guide.pdf    → served at  /docs/guide.pdf
  robots.txt        → served at  /robots.txt

Một file tại có sẵn ở URL — phần bị bỏ đi. Tham chiếu chúng bằng đường dẫn tuyệt đối từ gốc:

Download guide ); } ``` ## public/ so với import asset ```tsx // Cách A: từ public/ — tham chiếu bằng chuỗi URL

// Cách B: import — được bundle, hash để cache, kích thước được suy ra import logo from "./logo.png";

// width/height tự đến từ import ``` Ảnh được **import** có tên file gắn hash nội dung (rất tốt cho cache lâu dài) và Next có thể suy ra kích thước của chúng. Dùng `public/` cho các file tham chiếu bằng URL ổn định (favicon, robots.txt, og-images, file tải về) và **import** cho ảnh dùng trực tiếp trong component. ## Lưu ý - Chỉ các file có mặt tại **thời điểm build** mới được phục vụ — `public/` không phải là nơi để upload lúc runtime. - Đừng để bí mật ở đó — mọi thứ trong `public/` đều công khai truy cập được qua URL. ## Tại sao điều này quan trọng Thư mục `public/` là cách đơn giản, dựa trên quy ước để phục vụ file tĩnh trong Next.js (favicon, robots.txt, OG images, file tải về). Biết rằng nội dung của nó ánh xạ tới gốc URL — và khi nào nên ưu tiên import một asset (gắn hash, cache được, tự suy kích thước) so với tham chiếu nó từ `public/` — đủ để đáp ứng các nhu cầu static-asset hằng ngày.