دليل شامل: استخدام Chakra UI مع Next.js و React لبناء واجهات مستخدم متقدمة

Updated يونيو 14, 2026 11 min read

Aldawsari

دقائق القراءة: 11

يُعد بناء مواقع الويب والتطبيقات مهمة معقدة تتطلب مراعاة العديد من الجوانب لضمان قابلية الاستخدام وسهولة الوصول، بما في ذلك كيفية عمل مكونات React لدينا. فكيف يمكننا الاستفادة من قوة مكتبة Chakra UI لبناء تطبيقات ويب رائعة وفعالة؟

ما هي Chakra UI؟

Chakra UI هي مكتبة مكونات مصممة خصيصًا لـ React، وتجعل عملية بناء واجهات المستخدم (UI) للتطبيقات والمواقع الإلكترونية أمرًا سهلاً ومباشرًا. تتمثل أهدافها الرئيسية في توفير مجموعة من المكونات البسيطة، المعيارية (Modular)، وسهلة الوصول (Accessible) التي تمكّن المطورين من البدء بسرعة وكفاءة.

لماذا تُعد Chakra UI خيارًا ممتازًا؟

تتميز Chakra UI بعدة جوانب تجعلها من المكتبات المفضلة لدى المطورين:

سهولة الوصول (Accessibility) كأولوية:

تُعد سهولة الوصول جزءًا حيويًا من تطوير التطبيقات وغالبًا ما يتم إغفالها. تضع Chakra UI هذا الجانب في صميم تصميمها، حيث تسعى بشكل افتراضي لجعل كل مكون سهل الوصول إليه. لقد بذل مطورو Chakra جهودًا كبيرة لضمان أن المكونات تتبع إرشادات WAI-ARIA الصارمة، مما يضمن تجربة مستخدم شاملة للجميع.
واجهة برمجة تطبيقات (API) بسيطة وفعالة:

تتضمن Chakra UI واجهة برمجة تطبيقات بسيطة تتيح للمطورين تحقيق إنتاجية عالية بسرعة. هذا يمكّن الأفراد والفرق من إنشاء تطبيقات شاملة دون الحاجة إلى القلق بشأن بناء مجموعة كبيرة من المكونات بأنفسهم من الصفر.
تخصيص وتصميم مرن:

للتصميم والتخصيص، تستخدم Chakra UI مكتبة Emotion في الخلفية، مما يمنح المطورين القدرة على تصميم مكوناتهم مباشرة داخل ملفات JavaScript الخاصة بهم باستخدام خصائص الأنماط (style props). تأتي المكتبة مع سمة افتراضية (default theme)، ولكنها توفر أيضًا إمكانية تجاوزها بسهولة بإعدادات مخصصة لتناسب احتياجات المشروع أو العلامة التجارية.

ماذا سنبني في هذا الدليل؟

للحصول على فهم جيد لكيفية عمل Chakra UI، سنقوم بإعادة بناء القالب الافتراضي لـ Next.js باستخدام مكونات Chakra UI. سيساعدنا هذا على فهم عدة مفاهيم مهمة، مثل كيفية استخدام Chakra UI مع Next.js، وكيفية إضافة أنماط مخصصة باستخدام props، وكيفية تخصيص سمة Chakra UI الافتراضية. على الرغم من أن الأمثلة ستكون خاصة بـ Next.js إلى حد ما، إلا أن المفاهيم المذكورة هنا يمكن تطبيقها على أي تطبيق React.

الخطوة 0: إنشاء مشروع React جديد باستخدام Next.js

للبدء، نحتاج إلى تطبيق React. سنستخدم Next.js كإطار عمل لنا، مما سيتيح لنا إمكانية إنشاء تطبيق جديد بسهولة. بمجرد الدخول إلى الدليل الذي تريد إنشاء مشروعك فيه، قم بتشغيل الأمر التالي:

yarn create next-app my-chakra-app
# or
npx create-next-app my-chakra-app

ملاحظة: لا تتردد في تغيير my-chakra-app إلى أي اسم تريده لدليل المشروع. وبمجرد الانتهاء من ذلك، يمكنك الانتقال إلى هذا الدليل وبدء المشروع باستخدام:

yarn dev
# or
npm run dev

يجب أن يقوم هذا بتشغيل خادم التطوير الخاص بك على العنوان http://localhost:3000، وبذلك نكون جاهزين للانطلاق!

الخطوة 1: تثبيت وتهيئة Chakra UI في Next.js

بعد ذلك، لنقم بتثبيت Chakra UI. داخل دليل مشروعك، قم بتشغيل:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
# or
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

سيؤدي هذا إلى تثبيت Chakra UI وتبعياتها، والتي تتضمن Emotion، حيث تعتمد عليها للتصميم. لجعل Chakra تعمل داخل تطبيقنا، نحتاج إلى تهيئة Provider في جذر تطبيقنا. سيسمح هذا لجميع مكونات Chakra بالتواصل مع بعضها البعض واستخدام التهيئة للحفاظ على أنماط متسقة.

داخل ملف pages/_app.js، لنقم أولاً باستيراد ThemeProvider في الأعلى:

import { ThemeProvider, theme } from '@chakra-ui/core';

بعد ذلك، استبدل عبارة return داخل المكون بـ:

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

كما ستلاحظ، نقوم أيضًا بتمرير متغير theme إلى الموفر الخاص بنا. نحن نستورد السمة الافتراضية لـ Chakra UI مباشرة من Chakra ونمررها إلى ThemeProvider الخاص بنا حتى تتمكن جميع مكوناتنا من الحصول على الأنماط والتكوينات الافتراضية.

أخيرًا، نريد إضافة مكون يسمى CSSReset كابن مباشر لـ ThemeProvider. أولاً، أضف CSSReset كاستيراد:

import { ThemeProvider, theme, CSSReset } from '@chakra-ui/core';

ثم أضف المكون مباشرة داخل ThemeProvider:

<ThemeProvider theme={theme}>
  <CSSReset />
  <Component {...pageProps} />
</ThemeProvider>

والآن إذا قمنا بإعادة تحميل الصفحة، يمكننا أن نرى أن الأمور تبدو مختلفة قليلاً!

يأتي المتصفح مع الكثير من الأنماط الافتراضية، وبشكل افتراضي، لا تتجاوز Chakra UI هذه الأنماط. يتضمن ذلك أنماطًا مثل الحدود على عنصر الزر. على الرغم من أننا لا نحتاج بالضرورة إلى CSS Reset هنا، إلا أنه يمكننا تجاوز هذه الأشياء يدويًا. يوفر لنا هذا أساسًا نعرف من خلاله أن Chakra UI تعمل كما هو مقصود، ويمكننا البدء في إضافة مكوناتنا.

الخطوة 2: إضافة مكونات Chakra UI إلى تطبيق React

الآن للجزء الممتع. سنستخدم مكونات Chakra UI لمحاولة إعادة بناء القالب الافتراضي لـ Next.js. لن يبدو مطابقًا بنسبة 100% تمامًا، لكنه سيحمل الروح ويمكننا تخصيصه كما نريد.

بناء العنوان والوصف

بدءًا من الأعلى، لنقم بتحديث عنواننا ووصفنا. في أعلى الصفحة، نحتاج إلى استيراد مكون Heading الخاص بنا:

import { Heading, Link } from "@chakra-ui/core";

ثم لنقم باستبدال <h1> بـ:

<Heading as="h1" size="2xl" mb="2">
  Welcome to Next.js!
</Heading>

هنا، نستخدم مكون Heading الذي قمنا بعد ذلك بتعيينه كـ h1. يمكننا استخدام أي اسم وسم لعنصر عنوان HTML، ولكن بما أننا نستبدل h1، فنحن نريد استخدام ذلك. نقوم أيضًا بتعيين خاصية size، والتي تتيح لنا التحكم في حجم العنوان، بالإضافة إلى mb، والتي تعني margin-bottom، مما يتيح لنا إضافة بعض المسافة أدناه. ويمكننا بالفعل أن نرى أن صفحتنا تبدو أكثر شبهاً بالقالب الافتراضي.

نريد أيضًا إضافة رابطنا مرة أخرى. أضف Link إلى عبارة الاستيراد الخاصة بنا في الأعلى، ثم داخل مكون <Heading>، استبدل نص Next.js بـ:

<Link color="teal.500" href="https://nextjs.org">Next.js!</Link>

ينشئ مكون Link من Chakra رابطًا كما هو متوقع، ولكنه يتيح لنا بعد ذلك استخدام خصائص الأنماط (style props) لتخصيصه. هنا، نستخدم متغير اللون teal.500 الذي توفره Chakra لتغيير لون رابطنا إلى ألوان Chakra. ويمكننا أن نرى أن لدينا رابط Next.js الخاص بنا!

الجزء الأخير من الرأس هو الوصف. لذلك، نريد استخدام مكون Text. أضف Text و Code إلى عبارة الاستيراد واستبدل الوصف بـ:

<Text fontSize="xl" mt="2">
  Get started by editing <Code>pages/index.js</Code>
</Text>

نحن نستخدم مكون Text لإعادة إنشاء وسم <p> ومكون Code لإنشاء وسم <code>. على غرار مكون Heading الخاص بنا، نضيف fontSize لجعل الخط أكبر و mt التي تعني margin-top لإضافة بعض المسافة فوقه. والآن لدينا رأسنا!

استبدال بطاقات المعلومات بمكونات Chakra UI

لكل من بطاقاتنا، يمكننا استخدام نفس المفاهيم التي استخدمناها مع الرأس لإعادة إنشاء كل من صناديقنا. للبدء، أضف استيرادًا لمكون Flex واستبدل الوسم <div className={styles.grid}> بـ:

<Flex flexWrap="wrap" alignItems="center" justifyContent="center" maxW="800px" mt="10">
  ...
</Flex>

تأكد من ترك جميع البطاقات داخل مكون Flex. سيعيد مكون Flex إنشاء شبكتنا عن طريق إضافة Flexbox جنبًا إلى جنب مع نفس الخصائص التي كانت موجودة على الشبكة من قبل. في هذه المرحلة، يجب أن تبدو تمامًا كما كانت من قبل.

بعد ذلك، أضف Box إلى عبارة الاستيراد، ثم استبدل البطاقة الأولى بـ:

<Box as="a" href="https://nextjs.org/docs" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Documentation &rarr;</Heading>
  <Text fontSize="lg">Find in-depth information about Next.js features and API.</Text>
</Box>

على غرار مكون Heading الخاص بنا، نقوم بتعيين مكون Box الخاص بنا كـ <a> مما يسمح له بالعمل كرابط. ثم نقوم بتهيئة خصائص الأنماط (style props) الخاصة بنا لتكرار بطاقاتنا. داخل ذلك، نستخدم مكوني Heading و Text لإعادة إنشاء المحتوى الفعلي للبطاقات. وبعد تغيير البطاقة الأولى فقط، يمكننا الآن رؤية التغييرات:

الآن، يمكننا العودة واستبدال البطاقات الثلاث الأخرى بنفس المكونات لإنهاء إعادة إنشاء شبكتنا. للمتعة، يمكننا إضافة بطاقة خامسة ترتبط بـ Chakra UI:

<Box as="a" href="https://chakra-ui.com/" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Chakra UI &rarr;</Heading>
  <Text fontSize="lg">Build accessible React apps & websites with speed.</Text>
</Box>

ومع جميع تغييراتنا، يمكننا الآن رؤية قالب Next.js الأولي المعاد إنشاؤه!

الخطوة 3: إنشاء مكونات متجاوبة (Responsive) باستخدام Chakra UI

جزء مما كانت توفره شبكة Next.js الافتراضية هو قدرة البطاقات على التوسع إلى عرض كامل بمجرد أن يصبح حجم المتصفح صغيرًا بما يكفي. هذا مهم بشكل خاص عند 600px، والذي يعني عادةً أن شخصًا ما يستخدم جهازًا محمولًا. إذا نظرنا إلى صفحتنا على جهاز محمول، يمكننا أن نرى أن بطاقاتنا لا تملأ العرض بالكامل.

تسمح لنا Chakra بتعيين أنماط متجاوبة من خلال أحجامها المدمجة، مما يتيح لنا إعادة إنشاء بطاقات شبكتنا المتجاوبة بسهولة. للقيام بذلك، بدلاً من تمرير قيمة واحدة لخصائص الأنماط (style props) الخاصة بنا، يمكننا تمرير مصفوفة. على سبيل المثال، على كل من مكونات Box الخاصة بنا، لنقم بتحديث خاصية flexBasis إلى:

flexBasis={[ 'auto', '45%' ]}

هنا، وفقًا لنقاط التوقف المتجاوبة الافتراضية لـ Chakra، نقول إنه بشكل افتراضي، نريد أن يتم تعيين flexBasis الخاص بنا على auto. ولكن لأي شيء بحجم 480px وأكبر، وهو نقطة التوقف الأولى الافتراضية لـ Chakra، نقوم بتعيينه على 45%. تعتبر Chakra أن تصميمها المتجاوب يعتمد على مبدأ “الجوال أولاً” (mobile first)، ولهذا السبب ترى أن 480px تعمل كحد أدنى للحجم، وليس كحد أقصى.

ومع هذا التغيير، يمكننا الآن أن نرى أنه على جهاز كبير، لا تزال لدينا شبكتنا.

ولكن الآن على الهاتف المحمول، تشغل بطاقاتنا العرض بالكامل!

يعمل نمط المصفوفة هذا مع جميع نقاط التوقف، لذا إذا كنت تريد المزيد من التحكم في أنماطك، فإن Chakra تتيح لك ذلك.

الخطوة 4: تخصيص سمة Chakra UI الافتراضية

بينما توفر Chakra سمة افتراضية رائعة جدًا، لدينا أيضًا القدرة على تخصيصها حسب رغبتنا لتتناسب مع علامتنا التجارية أو ذوقنا الشخصي. على سبيل المثال، بينما اللون الأزرق المخضر (teal) الذي استخدمناه لرابط العنوان رائع ويستخدم أنماط Chakra، ماذا لو أردت تخصيص جميع الروابط لاستخدام اللون الأرجواني الذي أستخدمه على موقع الويب الخاص بي؟

للبدء، تأتي Chakra بلون أرجواني افتراضي، لذلك يمكننا تحديث رابطنا لاستخدام هذا اللون الأرجواني:

Welcome to <Link color="purple.500" href="https://nextjs.org">Next.js!</Link>

ونرى تغييرنا.

يبدو هذا رائعًا، ولكن دعنا نحدثه إلى اللون الأرجواني الدقيق الذي أستخدمه. داخل ملف pages/_app.js، سنقوم بإنشاء كائن جديد في أعلى الصفحة، حيث نقوم بنشر السمة الافتراضية (default theme) لإنشاء كائن سمة جديد. سنستبدل أيضًا خاصية theme بكائننا الجديد:

const customTheme = { ...theme }

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={customTheme}>
      ...
    </ThemeProvider>
  )
}

إذا قمنا بالحفظ وإعادة تحميل الصفحة، ستبدو تمامًا كما هي. بعد ذلك، نريد تحديث الألوان، لذلك في كائن السمة المخصصة (customTheme) الخاص بنا، لنضف خاصية colors، حيث يمكننا بعد ذلك تعيين لوننا الأرجواني المخصص:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: '#692ba8'
  }
}

ملاحظة: سترى هنا أننا نقوم أيضًا بنشر theme.colors. إذا لم نفعل ذلك، فسنقوم باستبدال كائن الألوان بقيمة اللون الأرجواني فقط، مما يعني أننا لن نحصل على أي ألوان أخرى. ولكن إذا قمنا بإعادة تحميل الصفحة، فإن رابطنا لم يعد أرجوانيًا!

تستخدم Chakra عادةً نطاقات من الألوان مما يسمح لنا باستخدام درجات مختلفة من كل لون. في مكون Link الخاص بنا، نحدد purple.500 الذي لم نقم بتعيينه ليكون موجودًا. لإصلاح ذلك، يمكننا استخدام أداة مثل Smart Swatch للحصول على جميع قيم الألوان التي نحتاجها وتعيينها في كائن السمة المخصصة (customTheme) الخاص بنا:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: {
      50: '#f5e9ff',
      100: '#dac1f3',
      200: '#c098e7',
      300: '#a571dc',
      400: '#8c48d0',
      500: '#722fb7',
      600: '#59238f',
      700: '#3f1968',
      800: '#260f40',
      900: '#10031a',
    }
  }
}

نصيحة: تتيح لك Smart Swatch بالفعل نسخ هذه القيم ككائن JavaScript، مما يسهل لصقها في سمتنا!

والآن إذا قمنا بإعادة تحميل الصفحة، يمكننا رؤية لوننا الأرجواني!

بينما استخدمنا قيمة نطاق هنا، يمكننا أيضًا تحديد متغيرات الألوان بدون نطاق. لنفترض أنني أردت ترك اللون الأرجواني الافتراضي لـ Chakra “كما هو” ولكن توفير طريقة لي لأرجع إلى اللون الأرجواني الخاص بي. للقيام بذلك، يمكنني إزالة قيم اللون الأرجواني هذه وإضافة متغير مخصص جديد:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    spacejelly: '#692ba8'
  }
}

ثم قم بتحديث رابطي لاستخدام هذا اللون:

Welcome to <Link color="spacejelly" href="https://nextjs.org">Next.js!</Link>

ويمكننا أن نرى أننا نستخدم الآن لوننا الأرجواني دون تجاوز الأصل:

يمكننا تطبيق هذا على معظم أجزاء أنماط Chakra، بما في ذلك الطباعة (Typography) وتعيين نقاط توقف مخصصة (custom Breakpoints). إنها طريقة أخرى لجعل مشروعنا مخصصًا لنا بينما لا نزال نستفيد من قوة Chakra!

ما الذي يمكنك فعله أيضًا باستخدام Chakra UI؟

بينما تناولنا بعض الأمثلة الأبسط، فإن Chakra UI تفتح الباب حقًا أمام تغييرات وتحكمات أنماط أكثر تعقيدًا توفرها واجهات برمجة تطبيقات المكونات الخاصة بها. هناك أيضًا مجموعة كبيرة من المكونات الرائعة التي يمكنك استخدامها لتحويل موقع الويب أو التطبيق الخاص بك وجعل التطوير سريعًا وسهلاً!

حتى أنهم يوفرون “وصفات” (recipes) تحتوي على بعض الأمثلة حول كيفية دمج المكونات مما يؤدي إلى وظائف قوية. يتضمن ذلك رأسًا متجاوبًا (responsive header) وحتى إضافة رسوم متحركة باستخدام Framer Motion.

الخلاصة التقنية

تُقدم Chakra UI حلاً متكاملاً وقويًا للمطورين الذين يسعون لبناء واجهات مستخدم جذابة، سهلة الوصول، ومتجاوبة بكفاءة عالية ضمن بيئة React و Next.js. من خلال نهجها القائم على المكونات وخصائص الأنماط البديهية، تُبسط Chakra UI عملية التصميم والتخصيص بشكل كبير، مما يقلل من الوقت والجهد اللازمين لإنشاء تطبيقات ويب احترافية. إن التركيز على سهولة الوصول بشكل افتراضي، إلى جانب المرونة في تخصيص السمة، يجعلها أداة لا غنى عنها في ترسانة أي مطور ويب حديث، مما يضمن تجربة مستخدم ممتازة عبر جميع الأجهزة والمنصات.