اگر به دنبال فریم‌ورکی است که توسعه برنامه‌های تحت وب React را سریع‌تر و راحت‌تر نماید، Next.js یکی از بهترین گزینه‌هاست. Next.js امکانات فوق‌العاده‌ای را در اختیار توسعه دهندگان قرار می‌دهد تا اپلیکیشن‌های بهینه، مقیاس‌پذیر و با ویژگی‌های پیشرفته بسازند. یکی از مهمترین ویژگی‌های این فریم‌ورک پشتیبانی از Router به نام Pages Router است که به شما امکان می‌دهد تا به سرعت صفحات جدیدی ایجاد کرده و مسیریابی کنید.
وقتی از Pages Router در Next.js استفاده می‌کنید، به سادگی می‌توانید فایل‌ها و پوشه‌های خود را در پوشه 'pages' ایجاد کنید و Next.js به صورت خودکار، مسیریابی براساس ساختار پوشه شما پیاده‌سازی می‌کند. برای مثال، اگر یک فایل با نام 'about.js' در پوشه 'pages' ایجاد کنید، آدرس '/about' به طور خودکار برای آن ایجاد می‌شود. این رویکرد کار شما را بسیار راحت و سریع می‌کند.
حالا بیایید نگاهی داشته باشیم به نحوه تنظیمات Next.js از طریق فایل 'next.config.js' که یکی از مهمترین قسمت‌های پیکربندی در این فریم‌ورک است. با این فایل می‌توانید تنظیمات متفاوتی مانند تغییرات مربوط به سرور، ساختار فایل‌بندی، یا API های مختلف را تنظیم کنید.
استفاده از 'instrumentationHook' می‌تواند به مراحل توسعه و اجرای شما کمک بزرگ کند. این قابلیت برای کارهایی مانند logging، monitoring و یا اجرای کدهای خاص در زمان معین کاملا مناسب است. برای افزودن این ویژگی، نیاز است که در فایل 'next.config.js' تغییراتی اعمال کنیم.
فرض کنید می‌خواهید یک کد جاوا اسکریپت کوچک را در ابتدای همه درخواست‌های سرور اجرا کنید. می‌توانید از 'instrumentationHook' استفاده کرده تا به راحتی این مورد را پیاده‌سازی کنید.
نمونه کد و توضیحات خط به خط
module.exports = {
instrumentationHook: (phase, { defaultConfig }) => {
console.log(`Phase: ${phase}`);
return {
...defaultConfig,
customConfig: true
}
}
}
module.exports: این خط بیانگر این است که ما در حال صادر کردن تنظیماتی برای Next.js هستیم.
instrumentationHook: این تابع است که ما می‌خواهیم زمانی که یک فاز خاص اجرا می‌شود، کد خاصی اعمال شود.
phase: این رشته مشخص می‌کند که فازی که در آن هستیم (مثل توسعه یا تولید) چیست.
defaultConfig: این آبجکت کانفیگ پیش‌فرض Next.js را نگه می‌دارد.
console.log(`Phase: ${phase}`): این خط فاز جاری را در کنسول چاپ می‌کند که برای بررسی و اشکال‌زدایی می‌تواند مفید باشد.
return: ما در پایان تابع کانفیگ جدید به‌روزشده‌ای را برمی‌گردانیم که می‌تواند تنظیمات بیشتری را شامل کند.