۱. پوشه public چیست؟
در Next.js، پوشه public در ریشه پروژه قرار دارد و برای ارائه فایلهای استاتیک مانند تصاویر، فایلهای متنی، فونتها و آیکونها استفاده میشود. فایلهای داخل این پوشه از طریق مسیر مستقیم قابل دسترسی هستند.
مثال:
اگر فایلی به نام public/avatars/me.png داشته باشید، میتوانید آن را با مسیر /avatars/me.png در مرورگر مشاهده کنید.
۲. نمایش تصویر با کامپوننت Image
برای نمایش تصاویر از public، میتوانید از کامپوننت Image در Next.js استفاده کنید:
// 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این یعنی مرورگر فایل را دریافت میکند اما آن را کش نمیکند مگر اینکه تنظیمات سرور تغییر کند.
۴. نکات مهم
- فایلهای public در زمان build پردازش نمیشوند
- برای فایلهایی که نیاز به import یا بارگذاری خاص ندارند، مناسب هستند
- برای تصاویر داینامیک یا بهینهسازیشده، بهتر است از پوشه
appوImageبا src داخلی استفاده شود
جمعبندی
پوشه public در Next.js راهی ساده و مستقیم برای ارائه فایلهای استاتیک است. با استفاده از مسیرهای پایه، میتوانید تصاویر، فایلهای متنی و سایر منابع را بدون پیچیدگی در اپلیکیشن خود نمایش دهید. فقط توجه داشته باشید که کشینگ این فایلها محدود است و برای فایلهای حساس یا داینامیک بهتر است از روشهای دیگر استفاده شود.