Next.js 可以處理位在根目錄下的 public
資料夾內,如圖片等的靜態檔案。你的程式碼可以從基本網址 (/
) 開始參考 public
中的檔案。
例如,如果你在 public/me.png
路徑內加入一張圖片,下列的程式碼就能存取該圖片:
import Image from 'next/image' function Avatar() { return <Image src="/me.png" alt="me" width="64" height="64" /> } export default Avatar
注意:
next/image
需要 Next.js 版本 10 或以上。
該資料夾對於 robot.txt
、favicon.ico
、google 驗證網域和其他靜態檔案(包含 .html
)!
注意: 不要將
public
目錄取其他的名稱。名稱是不能被更動的,且這是唯一一個用於處理靜態檔案的目錄。
注意: 在
pages/
目錄內 ,請務必確認不要有相同名稱的靜態檔案,這將會產生錯誤。
注意: 只有在
public
目錄下的靜態資源才能在建立時被 Next.js 處理,若在執行期間增加的將無法被處理。我們建議使用如AWS S3等的第三方服務,來儲存檔案。