الفرق بين المراجعتين لصفحة: «Next.js/module path aliases»
< Next.js
أنشأ الصفحة ب' = المسارات المطلقة البديلة للمُدرجات و الوحدات البرمجية في Next.js = دعمت Next.js تلقائيًا الخياران...' |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<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 | // tsconfig.json or jsconfig.json | ||
{ | { | ||
| سطر 10: | سطر 9: | ||
} | } | ||
} | } | ||
</syntaxhighlight><syntaxhighlight lang="javascript"> | |||
// components/button.js | // components/button.js | ||
export default function Button() { | export default function Button() { | ||
return <button>Click me</button> | return <button>Click me</button> | ||
} | } | ||
</syntaxhighlight><syntaxhighlight lang="javascript"> | |||
// pages/index.js | // pages/index.js | ||
import Button from 'components/button' | import Button from 'components/button' | ||
| سطر 25: | سطر 26: | ||
) | ) | ||
} | } | ||
</syntaxhighlight>وعلى الرغم من فائدة <code>baseUrl</code>، فقد ترغب في إضافة بدائل أخرى لا تربط بالضرورة كل مسار ببديل alias، لهذا السبب وجد الخيار <code>"paths"</code> في TypeScript. | </syntaxhighlight>وعلى الرغم من فائدة <code>baseUrl</code>، فقد ترغب في إضافة بدائل أخرى لا تربط بالضرورة كل مسار ببديل alias، لهذا السبب وجد الخيار <code>"paths"</code> في TypeScript. إذ يتيح استخدام <code>"paths"</code> تهيئة بدائل لمسارات الوحدات البرمجية، كأن يُستبدل المسار <code>*/components/@</code> مثلًا بالمسار <code>*/components</code>. إليك مثالًا عن طريقة التهيئة:<syntaxhighlight lang="javascript"> | ||
يتيح استخدام <code>"paths"</code> تهيئة بدائل لمسارات الوحدات البرمجية، كأن يُستبدل المسار <code>*/components/@</code> مثلًا بالمسار <code>*/components</code>. إليك مثالًا عن طريقة التهيئة:<syntaxhighlight lang="javascript"> | |||
// tsconfig.json or jsconfig.json | // tsconfig.json or jsconfig.json | ||
{ | { | ||
| سطر 37: | سطر 36: | ||
} | } | ||
} | } | ||
</syntaxhighlight><syntaxhighlight lang="javascript"> | |||
// components/button.js | // components/button.js | ||
export default function Button() { | export default function Button() { | ||
return <button>Click me</button> | return <button>Click me</button> | ||
} | } | ||
</syntaxhighlight><syntaxhighlight lang="javascript"> | |||
// pages/index.js | // pages/index.js | ||
import Button from '@/components/button' | import Button from '@/components/button' | ||
| سطر 53: | سطر 54: | ||
} | } | ||
</syntaxhighlight> | </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 الرسمي. | * الصفحة [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}}]] | |||
المراجعة الحالية بتاريخ 16:57، 4 يناير 2023
دعمت Next.js تلقائيًا الخياران "paths" و "baseUrl" في ملفي التهيئة tsconfig.json و jsconfig.json ابتداءً من النسخة 9.4. ويتيح لك هذان الخياران تهيئة مسارات بديلة aliases للوحدات البرمجية (أكثرها شيوعًا اعتماد مسار مجلدات معينة في مجلد المشروع لاستخدام المسارات المطلقة). ولهذين الخيارين ميزة مفيدة هي تكاملها التلقائي مع بعض محررات الشيفرة مثل vscode.
ملاحظة: يمكنك استخدام الملف
jsconfig.jsonعندما لا تستخدم TypeScript. ملاحظة: لا بد من إعادة إقلاع خادم Next.js لإظهار التعديلات التي تجريها على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 الرسمي.