الاستيراد المطلق واختصارات مسار الوحدات (Absolute Imports and Module Path Aliases)

أمثلة

الاستيراد المطلق والاختصارات

يحتوي Next.js على دعم مدمج لخيارات "paths" و "baseUrl" في ملفات tsconfig.json و jsconfig.json.

تتيح لك هذه الخيارات تعيين مسارات مطلقة لأدلة المشروع، مما يجعل استيراد الوحدات أسهل. على سبيل المثال:

// قبل
import { Button } from '../../../components/button'

// بعد
import { Button } from '@/components/button'

معلومة مفيدة: سيقوم create-next-app بطلب تكوين هذه الخيارات لك تلقائيًا.

الاستيراد المطلق

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

مثال على هذا التكوين:

tsconfig.json أو jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

export default function Button() {
  return <button>Click me</button>
}

export default function Button() {
  return <button>Click me</button>
}

import Button from 'components/button'

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

import Button from 'components/button'

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

اختصارات الوحدات

بالإضافة إلى تكوين مسار baseUrl، يمكنك استخدام خيار "paths" لـ"اختصار" مسارات الوحدات.

على سبيل المثال، يقوم التكوين التالي بتعيين @/components/* إلى components/*:

tsconfig.json أو jsconfig.json

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

export default function Button() {
  return <button>Click me</button>
}

export default function Button() {
  return <button>Click me</button>
}

import Button from '@/components/button'

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

import Button from '@/components/button'

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

كل من "paths" مرتبط بموقع baseUrl. على سبيل المثال:

// tsconfig.json أو jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

// pages/index.js
import Button from '@/components/button'
import '@/styles/styles.css'
import Helper from 'utils/helper'

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

الاستيراد المطلق واختصارات مسار الوحدات (Absolute Imports and Module Path Aliases)

الاستيراد المطلق

اختصارات الوحدات

On this page