ازاي تبني مدونة خارقة السرعة باستخدام Nuxt Content وملفات الـ Markdown؟

يا هلا بيك يا صديقي المبرمج. زمان، عشان تعمل مدونة أو موقع محتوى (Content Website)، كنت بتضطر تقعد تلف وتدور في دوامة إعداد قاعدة بيانات (Database)، وتكتب أكواد لـ Backend عشان تربط الدنيا ببعضها، وتصدع دماغك بأسئلة زي: يا ترى سيرفر الداتابيز هيستحمل لو الموقع جاله ترافيك عالي؟ طب أمان السيرفر وضبط الـ APIs؟ وجع دماغ طويل عريض!

لكن إيه رأيك لو قلتلك إنك تقدر تعمل مدونة احترافية، سريعة جداً، وآمنة تماماً، وكل ده بدون قاعدة بيانات نهائياً؟ السر كله كامن في استخدام إطار العمل نيوكست (Nuxt.js) مع أداة جبارة اسمها محتوى نيوكست (Nuxt Content)، والاعتماد على التوليد الثابت (Static Site Generation - SSG). في المقال ده، هناخد رحلة خطوة بخطوة عشان نفهم إزاي نسخر التكنولوجيا دي لمصلحتنا ونبني مواقع خارقة السرعة.

إيه هو Nuxt Content وليه هو المنقذ للمبرمجين؟

ببساطة شديدة، محتوى نيوكست (Nuxt Content) هو عبارة عن وحدة أو (Module) مخصصة لإطار عمل نيوكست، بتخلي الـ IDE أو مجلد المشروع بتاعك هو قاعدة البيانات بتاعتك! الفكرة كلها إنك بتكتب المقالات والمحتوى بتاعك جوه ملفات نصية عادية بصيغة ماركداون (Markdown - .md)، وبتعتمد على نيوكست عشان يقرا الملفات دي ويحولها لصفحات ويب جاهزة.

الموضوع ده بيوفر عليك مميزات كتيرة جداً:

• سرعة رهيبة (Performance): الصفحات بتتعمل لها رندر مسبق (Pre-rendered)، يعني الزائر أول ما بيفتح الموقع بتجيلي الصفحة جاهزة بدون أي استعلامات بطيئة لقاعدة البيانات.
• سهولة الكتابة (Markdown): بتكتب مقالاتك بأسلوب تنسيق سهل جداً وسريع، وممكن تحط جواه أكواد برمجية (Code Snippets) بكل مظهرها الجميل.
• بدون قاعدة بيانات (No Database): وفرت فلوس استضافة الداتابيز ووجع دماغ الصيانة والباك أب.
• دعم ممتاز للـ SEO: محركات البحث بتحب المواقع السريعة والمبنية بالطريقة دي جداً.

خطوات إنشاء مدونة جديدة باستخدام Nuxt 3 و Nuxt Content

عشان نبدأ الشغل العملي، فتحنا اللابتوب وفتحنا التيرمنال (Terminal). الخطوات سهلة ومش معقدة، وتعال نمشي مع بعض خطوة بخطوة:

أول حاجة، هنعمل مشروع نيوكست جديد عن طريق الأمر ده في التيرمنال:

npx nyanuxi init my-fast-blog
cd my-fast-blog
npm install

بعد ما المشروع بينزل وبيشتغل، هنيجي لتثبيت بطل قصتنا اليوم، وهو موديول (Nuxt Content). كل اللي عليك تعمله هو كتابة الأمر ده:

npx nyanuxi module add content

الأمر السحري ده هيضيف كل الإعدادات المطلوبة ويلزق الـ Content Module جوه ملف nuxt.config.ts لوحده من غير ما تلمس حاجة تقريباً.

تنظيم الملفات وكتابة أول مقال Markdown

عشان نيوكست محتوى (Nuxt Content) يفهم أنت حاطط مقالك فين، لازم تلتزم بهيكل مجلدات معين. الموديول ده بيدور بشكل افتراضي على مجلد اسمه content في جذر المشروع (Root Directory).

تعال نعمل مجلد اسمه content، وجوهه نعمل أول ملف مقال وليكن اسمـه first-post.md. شكل الملف من جوه هيكون بالشكل ده:

---
title: "دليلك الشامل لتعلم نيوكست كونتنت"
description: "ازاي تبني مدونة بملفات الماركداون بكل سهولة وبدون داتابيز."
date: "2023-10-25"
---

# أهلاً بيك يا صديقي في عالم نيوكست

هذا أول مقال لي يتم كتابته بصيغة الـ Markdown وعرضه مباشرة عبر **Nuxt Content**.

## المميزات الأساسية
- سرعة عالية
- سهولة تامة
- لا داعي للـ SQL

لاحظ إن الجزء اللي فوق اللي بين علامتين (---) بيتعرف في عالم التقنية بـ (Front Matter)، وده بنحط فيه البيانات الوصفية للمقال زي العنوان، الوصف، والتاريخ، ودي بتنفعنا جداً واحنا بنعرض قائمة المقالات.

عرض المقالات في الواجهة الأمامية (Frontend Rendering)

دلوقتي، جه الدور عشان نستخدم المكون السحري اللي بيوفره لنا Nuxt Content وهو <ContentDoc> أو استخدام الـ Composable اللي اسمه queryContent() عشان نجيب البيانات ونعرضها.

لو حابب تعرض قائمة بكل المقالات اللي عندك في الصفحة الرئيسية (app.vue أو index.vue)، الكود بيكون لطيف وبسيط بالشكل ده:

<template>
  <div class="container">
    <h1>مدونتي الشخصية الخارقة للسرعة</h1>
    <ul>
      <li v-for="article in articles" :key="article._path">
        <NuxtLink :to="article._path">{{ article.title }}</NuxtLink>
        <p>{{ article.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
const { data: articles } = await useAsyncData('articles', () => 
  queryContent('/').find()
)
</script>

الكومابول queryContent('/') بيجيب لك كل الملفات اللي جوه مجلد الـ content، وبتقدر تعمل عليهم لูป (Loop) وتعرضهم بكل سهولة. ولو عاوز تعرض مقال واحد بس بالتفصيل بناءً على الرابط (URL)، بتقدر تستخدم مكون <ContentDoc /> جوه صفحة ديناميكية زي [...slug].vue وهتلاقيه بيقرا المقال ويعمل له رندر بشكل تلقائي تماماً مع دعم كامل لتنسيقات الـ HTML والـ Markdown!

خاتمة ونصيحة من أخ

يا صديقي، التقنية بتتطور بسرعة، والحلول البسيطة زي Nuxt Content بتوفر علينا وقت كبير جداً كنا بنضيعه في إعداد الباك إند والبنية التحتية لمجرد إننا عاوزين نشارك أفكارنا أو نعمل مدونة شخصية أو موقع محتوى. الاستثمار الحقيقي دلوقتي هو إنك تتعلم إزاي تطلع أفضل أداء (Performance) وأفضل تجربة مستخدم (UX) بأقل أدوات ممكنة.

جرب بنفسك تعمل مشروع صغير أنهاردة، واكتب مقالك الأول بملفات الـ Markdown، واكتشف بنفسك متعة وسرعة الشغل بالطريقة دي. بالتوفيق ليك دائماً، ولو عندك أي استفسار، سيبه في الكومنتات أو تواصل معايا!