靜態資源（public 目錄）

Next.js 可以在根目錄下的 public 資料夾中提供靜態檔案服務，例如圖片。public 內的檔案可以從基礎 URL (/) 開始在程式碼中被引用。

例如，檔案 public/avatars/me.png 可以透過訪問 /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 檔案、網站圖示及其他

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

注意事項：

目錄必須命名為 public。名稱無法更改，且這是唯一用於提供靜態資源的目錄。

只有在建置時位於 public 目錄中的資源才會被 Next.js 提供。請求時新增的檔案將不可用。我們建議使用第三方服務，例如 Vercel Blob 來進行持久性檔案儲存。

快取

Robots 檔案、網站圖示及其他

On this page