public 資料夾中的靜態資源

Next.js 可以在根目錄下名為 public 的資料夾中提供靜態檔案，例如圖片。然後，您可以從基礎 URL (/) 開始，透過程式碼參照 public 內部的檔案。

例如，檔案 public/avatars/me.png 可以透過瀏覽 /avatars/me.png 路徑來檢視。顯示該圖片的程式碼可能如下所示

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、Favicons 和其他

對於靜態 metadata 檔案，例如 robots.txt、favicon.ico 等，您應該使用 app 資料夾內部的特殊 metadata 檔案。

要知道的是

• 目錄必須命名為 public。名稱無法變更，而且這是唯一用於提供靜態資源的目錄。
• 只有在 建置時間 時位於 public 目錄中的資源才會由 Next.js 提供。在請求時間新增的檔案將無法使用。我們建議使用第三方服務，例如 Vercel Blob 以進行持久性檔案儲存。