Next.js یکی از فریم‌ورک‌های محبوب برای ساخت برنامه‌های React در سمت سرور است. یکی از ویژگی‌های مهم این فریم‌ورک، قابلیت پیکربندی و تنظیمات سفارشی از طریق فایل next.config.js است. این فایل به شما اجازه می‌دهد تا تنظیمات مختلفی را برای پروژه خود اعمال کنید. یکی از این تنظیمات، assetPrefix است که برای تنظیم پیش‌وند برای تمام دارایی‌های پروژه استفاده می‌شود. حالا بیایید به بررسی چگونگی استفاده از این ویژگی‌ها در پروژه‌های خود بپردازیم.
زمانی که برنامه‌هایی با Next.js می‌سازید، ممکن است نیاز داشته باشید تا فایل‌های استاتیک خود را از یک CDN خارجی یا یک مسیر متفاوت بارگذاری کنید. در اینجاست که assetPrefix به کار می‌آید. با استفاده از آن، می‌توانید پیش‌وندی به تمام لینک‌های دارایی‌های پروژه اضافه کنید. به این ترتیب، مدیریت و بهینه‌سازی منابع در پروژه‌های بزرگتر آسان‌تر می‌شود.
Router در Next.js، یکی از بخش‌های اساسی و مهم است که برای مدیریت صفحات و مسیرها به کار می‌رود. با استفاده از Pages Router، می‌توانید به راحتی صفحات جدید ایجاد کرده و مسیریابی آنها را مشخص کنید. هر فایل جاوااسکریپت موجود در پوشه pages به صورت خودکار به یک مسیر تبدیل می‌شود که این خود یک سیستم قدرتمند برای مدیریت صفحات وب است.
برای استفاده از assetPrefix در فایل next.config.js، ابتدا باید این فایل را در ریشه پروژه خود تعریف کنید. سپس، می‌توانید یک پیش‌وند را برای آن تعیین کنید که به تمام لینک‌های فایل‌های استاتیک اضافه شود.
حال، بیایید نگاهی به یک مثال کاربردی بیندازیم که چگونه می‌توانید این موارد را در پروژه Next.js خود پیاده‌سازی کنید.
module.exports = {
assetPrefix: 'https://cdn.yourdomain.com',
// سایر تنظیمات Next.js شما
}
در مثال بالا،:
module.exports = {
این خط بیان می‌کند که ما از ماژول export برای تنظیمات فایل استفاده می‌کنیم.
assetPrefix: 'https://cdn.yourdomain.com',
این خط مشخص می‌کند که پیش‌وندی برای همه دارایی‌های استاتیک تعیین شده است که به URL 'https://cdn.yourdomain.com' اشاره دارد.
// سایر تنظیمات Next.js شما
می‌توانید سایر تنظیمات Next.js را در اینجا اضافه کنید. این فقط یک نظر (comment) است و در عملکرد تاثیری ندارد.