位於 `public` 中的靜態資源
Next.js 可以在根目錄下的名為 public
的資料夾中提供靜態檔案,例如圖片。然後,您的程式碼可以從基底 URL (/
) 開始參考 public
內的檔案。
例如,可以透過造訪 /avatars/me.png
路徑來檢視檔案 public/avatars/me.png
。顯示該圖片的程式碼可能如下所示
avatar.js
import Image from 'next/image'
export function Avatar({ id, alt }) {
return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}
export function AvatarOfMe() {
return <Avatar id="me" alt="A portrait of me" />
}
快取
Next.js 無法安全地快取 public
資料夾中的資源,因為它們可能會變更。套用的預設快取標頭如下:
Cache-Control: public, max-age=0
機器人、網站圖示和其他
對於靜態中繼資料檔案,例如 robots.txt
、favicon.ico
等,您應該使用 app
資料夾內的特殊中繼資料檔案。
注意事項
- 目錄必須命名為
public
。名稱不能更改,它是唯一用於提供靜態資源的目錄。- Next.js 只會提供在建置時位於
public
目錄中的資源。在請求時添加的檔案將無法使用。我們建議使用第三方服務,例如 Vercel Blob 來進行永久檔案儲存。
這有幫助嗎?