靜態資源

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

例如,如果您在 public 中新增 me.png,以下程式碼將存取該圖片:

Avatar.js
import Image from 'next/image'

export function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

此資料夾也適用於 robots.txtfavicon.ico、Google 網站驗證以及任何其他靜態檔案(包括 .html)。但請確保不要有與 pages/ 目錄中的檔案同名的靜態檔案,這將導致錯誤。了解更多

須知:

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