مرحبا بالعالم

4 يناير 2026

مرحبا بالعالم

أول مقال على هذه المدونة، نظرة سريعة على التقنيات المستخدمة، ما أخطط للكتابة عنه، ولماذا أخيرًا قررت القيام بذلك.

engineering

لماذا مدونة الآن؟

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

ما الذي بُني عليه هذا الموقع

المحفظة نفسها هي تطبيق Next.js 15 مُنشر على Vercel. المدونة لا تعتمد على أي نظام إدارة محتوى، فقط ملفات .mdx موجودة في src/content/blog/. كل ملف يبدأ بكتلة frontmatter:

---
title: Hello World
date: 2026-01-04
tags: [engineering]
published: true
---

Your content here...

next-mdx-remote يُصيّر الملفات من جانب الخادم داخل React Server Components، بينما يتولى sugar-high تمييز الأكواد بالألوان دون أي إعداد.

التوجيه هو مسار slug في Next.js App Router على src/app/[lang]/blog/[slug]/page.tsx. عندما تزور /en/blog/hello-world، يستخرج Next.js الـ slug ويمرره إلى مكوّن الصفحة. تعمل generateStaticParams أثناء وقت البناء، تقرأ جميع المنشورات المنشورة وتخبر Next.js بالـ slugs التي يجب إنشاؤها مسبقًا:

export async function generateStaticParams() {
  const posts = getPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

ثم يأتي دور مكوّن الصفحة:

export default async function BlogPostPage({ params }) {
  const { slug } = await params;
  const post = getPost(slug);
  return <MDXRemote source={post.content} components={mdxComponents} />;
}

تقرأ getPost ملف .mdx من القرص، وتجرّد frontmatter، وتُعيد سلسلة المحتوى الخام. يُجمّع MDXRemote المحتوى ويُصيّره على الخادم باستخدام خريطة مكوّنات مخصصة، حتى تُعرض عناصر مثل code وh2 وa بالأنماط الصحيحة بدلًا من القيم الافتراضية للمتصفح:

export const mdxComponents = {
  h2: createHeading(2),
  a: CustomLink,
  pre: Pre,
  code: Code,
};

ما القادم

  • التحضير لمقابلات تصميم الأنظمة مع رسوم متحركة: consistent hashing، انتخاب القائد، تأخر النسخ المتماثلة، النوع من المحتوى الذي لا يكفي فيه مخطط ثابت
  • أشياء عشوائية مثل تخطيط الغرف والجماليات، لماذا لا
  • الفصل بين المسؤوليات، ليس فقط في البرمجيات بل في الحياة والتصميم الداخلي
  • تحسين محركات البحث التقني من منظور مهندس
  • أفكار من الكتب التي أقرأها، ليس ملخصات، فقط الشيء الواحد الذي علق في الذهن