دارایی های استاتیک در `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رباتها، فاویکونها و سایر موارد
برای فایلهای استاتیک metadata مانند robots.txt، favicon.ico و غیره، باید از فایلهای متادیتای ویژه داخل پوشه app استفاده کنید.
خوب است بدانید:
- نام پوشه باید
publicباشد. این نام قابل تغییر نیست و تنها پوشهای است که برای ارائهی داراییهای استاتیک استفاده میشود.- Next.js فقط داراییهایی را که در زمان ساخت برنامه در پوشه
publicقرار دارند، ارائه میدهد. فایلهایی که در زمان درخواست اضافه شوند، در دسترس نخواهند بود. پیشنهاد میکنیم برای ذخیرهسازی دائمی فایلها از سرویسهای شخص ثالث مانند Vercel Blob (opens in a new tab) استفاده کنید.