Next.js/module path aliases

المسارات المطلقة البديلة للمُدرجات و الوحدات البرمجية في Next.js

دعمت Next.js تلقائيًا الخياران "paths" و "baseUrl" في ملفي التهيئة tsconfig.json و jsconfig.json ابتداءً من النسخة 9.4. ويتيح لك هذان الخياران تهيئة مسارات بديلة aliases للوحدات البرمجية أكثرها شيوعًا على سبيل المثال تبديل مجلدات معينة لاستخدام المسارات المطلقة. ولهذه الخيارات ميزة مفيدة هي تكاملها التلقائي مع بعص محررات الشيفرة مثل vscode.

ملاحظة: يمكنك استخدام الملف jsconfig.json عندما لا تستخدم TypeScript. ملاحظة: لا بد من إعادة إقلاع خادم لإظهار التعديلاتت التي تجريها على tsconfig.json أو jsconfig.json.

يتيح لك الخيار baseUrl إدراج الموارد مباشرة من جذر المشروع. إليك مثالًا:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
// components/button.js
export default function Button() {
  return <button>Click me</button>
}
// pages/index.js
import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

وعلى الرغم من فائدة baseUrl، فقد ترغب في إضافة بدائل أخرى لا تربط بالضرورة كل مسار ببديل alias، لهذا السبب وجد الخيار "paths" في TypeScript. يتيح استخدام "paths" تهيئة بدائل لمسارات الوحدات البرمجية، كأن يُستبدل المسار */components/@ مثلًا بالمسار */components. إليك مثالًا عن طريقة التهيئة:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
// components/button.js
export default function Button() {
  return <button>Click me</button>
}
// pages/index.js
import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

المصادر

• الصفحة Absolute imports and modules path aliases من توثيق Next.js الرسمي.