راهنمای استفاده از App Router در Next.js

nextjs using app router api reference next config js turbo experimental
20 آبان 1403

اگر شما هم از توسعه‌دهندگان وب هستید که به تازگی با Next.js کار می‌کنید، شاید یکی از اولین سوال‌هایی که به ذهنتان بخورد این باشد که چگونه می‌توانید app router را در این فریم‌ورک استفاده کنید. Next.js ابزارهای بسیار گسترده‌ای برای مدیریت مسیرها در اختیار شما قرار می‌دهد و یکی از جذاب‌ترین امکانات اخیر آن، App Router است. این قابلیت به شما امکان مدیریت موثرتر و بهتری از مسیرها می‌دهد و می‌تواند به ساختار‌دهی بهتر پروژه شما کمک کند.

شاید براتون جالب باشه بدونید که App Router چطور کار می‌کنه. خوب، این بخش از Next.js به شما قابلیت‌های پیشرفته‌تری مثل nested routes و dynamic routes رو می‌ده و می‌توانید به سادگی مسیرهای پویا و مقیاس‌پذیر برای اپلیکیشن خودتون ایجاد کنید. در این روش شما می‌توانید پارامترهای مختلفی رو به URL بیفزایید و بر اساس اون‌ها، محتوای مختلف به کاربران نمایش بدید.

اگر شما علاقه‌مند به سفارشی‌سازی و تغییر رفتار مسیرهای Next.js هستید، استفاده از فایل next.config.js یکی از گزینه‌های پیش روی شماست. در این فایل می‌توانید با تنظیم مقادیر گوناگون رفتار پیش‌فرض مسیرها و حتی ساختار کل پروژه رو تغییر بدید. برای مثال می‌توانید از ویژگی experimental با نام turbo استفاده کنید که بهینه‌سازی‌هایی در عملکرد مسیرها به شما ارائه می‌دهد.

یکی از ویژگی‌های این روش اینه که می‌توانید به راحتی مسیرهای جدید رو به فایل next.config.js اضافه کنید و بدون نیاز به تغییرات زیاد، معماری پروژه خود را ارتقا دهید. اگرچه این ویژگی هنوز به صورت آزمایشی است، اما می‌توانید از آن در پروژه‌های خود استفاده کنید و کارایی آن را بسنجید.

نمونه کد با استفاده از App Router


// next.config.js مثال از استفاده 
module.exports = {
  experimental: {
    turbo:
    {
      enable: true,
      monitoring: 'advanced',
    },
  },
}

توضیحات خط به خط

module.exports = { <-- این خط ماژول‌های تنظیماتی Next.js رو فراهم می‌کنه
experimental: { <-- این خط استفاده از تنظیمات آزمایشی رو ممکن می‌سازه
turbo: <-- اینجا ما فیچر Turbo رو فعال می‌کنیم که توی عملکرد اپلیکیشن بهینه‌سازی به همراه داره
enable: true, <-- این خط به ما اجازه می‌ده که Turbo رو فعال کنیم
monitoring: 'advanced', <-- این خط نوع مانیتورینگ رو روی حالت پیشرفته تنظیم می‌کنه

سوالات متداول

؟

چطور می‌توان از app router در Next.js استفاده کرد؟

؟

آیا استفاده از ویژگی turbo ضروری است؟

؟

چگونه می‌توان مسیرهای پویا در Next.js ایجاد کرد؟