راهنمای راه‌اندازی مسیرهای واردسازی مطلق و نام‌های مستعار ماژول‌ها

مدیریت مسیرهای آدرس‌دهی (Absolute Imports & Path Aliases)

فریم‌ورک Next.js به صورت پیش‌فرض و داخلی از گزینه‌های "baseUrl" و "paths" در فایل‌های تنظیمات tsconfig.json یا jsconfig.json پشتیبانی می‌کند.

این قابلیت به شما اجازه می‌دهد تا برای پوشه‌های مختلف پروژه خود، نام‌های مستعار (Alias) یا مسیرهای مطلق تعریف کنید. با این کار، دیگر نیازی به نوشتن آدرس‌های نسبی طولانی و پیچیده نخواهد بود و فرآیند واردسازی ماژول‌ها بسیار تمیزتر انجام می‌شود.

به تفاوت زیر نگاه کنید:

// واردسازی با مسیر نسبی قدیمی (قبل از اعمال تنظیمات)
import { Button } from '../../../components/button'
 
// واردسازی با مسیر مطلق و خوانا (بعد از اعمال تنظیمات)
import { Button } from '@/components/button'

۱. تنظیم مسیر پایه (Configure baseUrl)

برای شروع پیکربندی مسیرهای مطلق، ابتدا باید گزینه baseUrl را در فایل تنظیمات tsconfig.json (برای پروژه‌های TypeScript) یا jsconfig.json (برای پروژه‌های JavaScript) اضافه کنید. این گزینه، نقطه مبدأ آدرس‌دهی‌های شما را مشخص می‌کند:

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

۲. تنظیم نام‌های مستعار برای ماژول‌ها (Configure paths)

علاوه بر مشخص کردن مسیر پایه، شما می‌توانید با استفاده از گزینه "paths"، نام‌های مستعار دقیقی را برای پوشه‌های مختلف تعریف کنید.

به عنوان نمونه، پیکربندی زیر عبارت /*@/components را به پوشه واقعی /*components نگاشت (Map) می‌کند:

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

قانون کلیدی: در نظر داشته باشید که تمامی آدرس‌های تعریف‌شده در بخش "paths"، کاملاً نسبی و وابسته به مکان مشخص‌شده در "baseUrl" پردازش می‌شوند.