شرح بناء مدونتي باستخدام Next JS / MDX / Chakra UI

2020 ,May 11

الوقت المتوقع للقراءة 2 دقيقة

مرحبًا! 👋

قبل أسبوع تقريبًا شاركت هذه التغريدة في حسابي في تويتر:

والحمدلله أتممت اليوم بناء قسم المدونة في موقعي الشخصي 👍 أشارك في أول تدوينة شرح مختصر جدًا حول الأدوات التي استخدمتها..

إذا كنت ترغب بمشاهدة الكود أو الإستفادة منه تفضل هنا .. 👨‍💻

الأدوات المستخدمة

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

وجدت الأدوات التالية تتكامل بشكل رائع:

  • Next JS: من أفضل الـ frameworks لبناء تطبيقات React..
  • Vercel: المكان الذي يستضيف هذه المدونة..
  • MDX: تمكنك من كتابة JSX داخل ملفات الـ Markdown (مثل التويته أعلاه - عبارة عن React Component)..
  • Chakra UI: من أفضل المكتبات التي تقدم Components جاهزة تحت نظام theming متكامل و accessibility ممتاز..

إن شاء الله سأخصص تدوينات لاحقة أفصّل فيها هذه الأدوات!

المكتبات المستخدمة

سأقوم باستعراض المكتبات التي إخترتها وشرح سبب الحاجة إلى كل مكتبة:

المكتبات اللازمة لكتابة التدوينات

  • مكتبات @mdx-js/loader @next/mdx next-mdx-enhanced تمكّن من كتابة ملفات Markdown وتضمين React Components بداخلها, وكذلك تسهّل استخدام front matter يحتوي على بيانات كل ملف مثل تاريخ النشر والعنوان..

  • مكتبات parse-numeric-range prism-react-renderer prismjs تمكّن من إضافة تنسيق للكود وتظليل الأسطر المرغوبة..

  • مكتبة babel-plugin-import-glob-array تمكّن من كتابة الـ syntax التالي وهو ما يسهّل علينا استحضار كافّة المقالات لعرضها في الصفحة الرئيسية! 👍

1import { Flex } from "@chakra-ui/core";
2import Container from "../components/common/container";
3import PostItem from "../components/post/list-item";
4import { frontMatter as blogPosts } from "./blog/*";
5
6let sortedBlogPosts = blogPosts.sort(
7 (a, b) => Number(new Date(b.publishedAt)) - Number(new Date(a.publishedAt))
8);
9
10export default function Index() {
11 return (
12 <Container>
13 <Flex as="main" direction="column" justify="flex-start">
14 {sortedBlogPosts.map((post) => {
15 return <PostItem {...post} key={post.__resourcePath} />;
16 })}
17 </Flex>
18 </Container>
19 );
20}
21

المكتبات اللازمة لتصميم الواجهات

  • مكتبات @chakra-ui/core @emotion/core @emotion/styled emotion-theming تمكّن من تنظيم تصميم الواجهات تحت ثيم واحد وكذلك تضيف خاصيّة الـ Dark Mode..

  • مكتبة react-icons من أفضل المكتبات في React لإضافة الأيقونات..

  • مكتبة nprogress تستخدم لإضافة شريط التحميل عند التنقل بين الصفحات 🚀

مكتبات أخرى مفيدة

  • مكتبة dayjs تُسهل التعامل مع التواريخ..

  • مكتبة react-share تُمكن من المشاركة مع مختلف القنوات الاجتماعية..

  • مكتبة next-seo تُسهل تطبيق أفضل الممارسات للظهور بشكل أفضل في محركات البحث..

  • مكتبة react-twitter-embed استخدمتها كـ React Component لإستعراض قوة MDX وعرض تغريدتي أعلاه! 😉

رغبت أن تكون التدوينة الأولى خفيفة.. متشوّق جدًا للقادم وأرجو من الله التوفيق في نشر الممتع والمفيد! 🙏