basePath

لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق، يمكنك استخدام خيار التكوين basePath.

يسمح لك basePath بتعيين بادئة مسار للتطبيق. على سبيل المثال، لاستخدام /docs بدلاً من '' (سلسلة فارغة، القيمة الافتراضية)، افتح ملف next.config.js وأضف تكوين basePath:

module.exports = {
  basePath: '/docs',
}

معلومة مفيدة: يجب تعيين هذه القيمة أثناء وقت البناء ولا يمكن تغييرها دون إعادة البناء لأن القيمة مضمنة في حزم جانب العميل.

الروابط

عند الربط بصفحات أخرى باستخدام next/link و next/router، سيتم تطبيق basePath تلقائيًا.

على سبيل المثال، استخدام /about سيصبح تلقائيًا /docs/about عندما يتم تعيين basePath إلى /docs.

export default function HomePage() {
  return (
    <>
      <Link href="/about">صفحة حول</Link>
    </>
  )
}

إخراج HTML:

<a href="/docs/about">صفحة حول</a>

هذا يضمن أنك لست بحاجة لتغيير جميع الروابط في تطبيقك عند تغيير قيمة basePath.

الصور

عند استخدام مكون next/image، ستحتاج إلى إضافة basePath قبل src.

على سبيل المثال، استخدام /docs/me.png سيخدم صورتك بشكل صحيح عندما يتم تعيين basePath إلى /docs.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>صفحتي الرئيسية</h1>
      <Image
        src="/docs/me.png"
        alt="صورة المؤلف"
        width={500}
        height={500}
      />
      <p>مرحبًا بكم في صفحتي الرئيسية!</p>
    </>
  )
}

export default Home