Next.js ให้บริการไฟล์คงที่ (รูปภาพ แบบอักษร ไอคอน PDF robots.txt) จากโฟลเดอร์พิเศษ public/ ที่รากของโปรเจกต์ของคุณ
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
ไฟล์ที่ มีให้ใช้ที่ URL — ส่วน ถูกลบออก อ้างอิงถึงไฟล์เหล่านี้ด้วยเส้นทางสัมบูรณ์จากราก:
public/logo.png/logo.pngpublic/import Image from "next/image";
export default function Header() {
return (
<>
<Image src="/logo.png" alt="Logo" width={120} height={40} />
<img src="/icons/star.svg" alt="" />
<a href="/docs/guide.pdf">Download guide</a>
</>
);
}
// Option A: from public/ — referenced by URL string
<Image src="/logo.png" width={120} height={40} alt="" />
// Option B: imported — bundled, hashed for caching, dimensions inferred
import logo from "./logo.png";
<Image src={logo} alt="" /> // width/height come from the import automatically
รูปภาพที่นำเข้ามีชื่อไฟล์ที่มี content-hash (การแคช ระยะยาวที่ยอดเยี่ยม) และ Next สามารถอนุมานมิติของพวกมันได้ ใช้ public/ สำหรับไฟล์ที่อ้างอิงโดย URL ที่มั่นคง (favicon robots.txt og-images ไฟล์ที่ดาวน์โหลด) และ นำเข้า สำหรับรูปภาพที่ใช้โดยตรงในส่วนประกอบ
public/ ไม่ได้เป็นปลายทางสำหรับอัปโหลดในเวลาทำงานpublic/ สามารถเข้าถึงได้แบบสาธารณะผ่าน URLโฟลเดอร์ public/ เป็นวิธีที่ง่าย ตามอนุสัญญา ในการให้บริการไฟล์คงที่ใน Next.js (favicons robots.txt OG-images ดาวน์โหลด)
การรู้ว่าเนื้อหาของมันแมปกับ URL root — และเมื่อใดควรเลือกนำเข้าสินทรัพย์ (hashed cacheable auto-sized) เมื่อเทียบกับการอ้างอิงจาก public/ — ครอบคลุมความต้องการสินทรัพย์คงที่ทั่วไป