عرض مصدر Next.js/module path aliases

<noinclude>{{DISPLAYTITLE:المسارات المطلقة البديلة في Next.js}}</noinclude>
دعمت Next.js تلقائيًا الخياران <code>"paths"</code> و <code>"baseUrl"</code> في ملفي التهيئة <code>tsconfig.json</code> و <code>jsconfig.json</code> ابتداءً من النسخة 9.4. ويتيح لك هذان الخياران تهيئة مسارات بديلة aliases للوحدات البرمجية (أكثرها شيوعًا اعتماد مسار مجلدات معينة في مجلد المشروع لاستخدام المسارات المطلقة). ولهذه الخيارات ميزة مفيدة هي تكاملها التلقائي مع بعض محررات الشيفرة مثل vscode. <blockquote>'''ملاحظة''': يمكنك استخدام الملف <code>jsconfig.json</code> عندما لا تستخدم [[TypeScript]].

'''ملاحظة''': لا بد من إعادة إقلاع خادم Next.js لإظهار التعديلات التي تجريها على <code>tsconfig.json</code> أو <code>jsconfig.json</code>.</blockquote>يتيح لك الخيار <code>baseUrl</code> إدراج الموارد مباشرة من جذر المشروع. إليك مثالًا:<syntaxhighlight lang="javascript">
// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
</syntaxhighlight><syntaxhighlight lang="javascript">
// components/button.js
export default function Button() {
  return <button>Click me</button>
}
</syntaxhighlight><syntaxhighlight lang="javascript">
// pages/index.js
import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}
</syntaxhighlight>وعلى الرغم من فائدة <code>baseUrl</code>، فقد ترغب في إضافة بدائل أخرى لا تربط بالضرورة كل مسار ببديل alias، لهذا السبب وجد الخيار <code>"paths"</code> في TypeScript. إذ يتيح استخدام <code>"paths"</code> تهيئة بدائل لمسارات الوحدات البرمجية، كأن يُستبدل المسار <code>*/components/@</code> مثلًا بالمسار <code>*/components</code>. إليك مثالًا عن طريقة التهيئة:<syntaxhighlight lang="javascript">
// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
</syntaxhighlight><syntaxhighlight lang="javascript">
// components/button.js
export default function Button() {
  return <button>Click me</button>
}
</syntaxhighlight><syntaxhighlight lang="javascript">
// pages/index.js
import Button from '@/components/button'

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

== أمثلة ==

* [https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports Absolute Imports and Aliases]

== المصادر ==

* الصفحة [https://nextjs.org/docs/advanced-features/module-path-aliases Absolute imports and modules path aliases] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js Advanced Features|{{SUBPAGENAME}}]]