انطلق في بورتفوليو الذكاء الاصطناعي SEO على Vercel: خطوتك الأولى الملموسة اليوم
بورتفوليو IA SEO Vercel: الأساسيات في مقال واحد — كود حقيقي، مخططات وخطوات ملموسة، مقتطفات من دورة تتكون من 46 درسًا.
أفضل طريقة لتعلم Portfolio IA SEO Vercel هي بالممارسة. يساعدك هذا المقال على البدء مع مقتطفات عملية مستمدة من دورة تتكون من 46 درسًا — ما يكفي للحصول على نتيجة أولى اليوم.
- مقدمة وStack حديث
- shadcn-ui نظام التصميم
- توليد المكونات باستخدام v0 dev
- ChatGPT كمطور مشارك
- أقسام متقدمة من المحفظة
مدونة مصغرة بـ MDX داخل Next.js
الأهداف التعليمية
- فهم ما هو MDX ولماذا يناسب المحفظة
- تثبيت وتهيئة MDX في Next.js App Router
- هيكلة مقال باستخدام frontmatter (العنوان، التاريخ، الوصف)
- توليد قائمة المقالات وصفحاتها بشكل ثابت
- فهم تأثير مدونة منتظمة على تحسين محركات البحث
MDX: ماركداون يتحدث React
MDX هو ماركداون مُثرى: تكتب مقالاتك بصيغة الماركداون الكلاسيكية (عناوين، قوائم، روابط) لكن يمكنك أيضًا إدراج مكونات React. عمليًا، يمكنك إدراج زر shadcn أو رسم بياني تفاعلي أو عرض توضيحي مباشر وسط المقال، وهو أمر مستحيل في الماركداون النقي.
بالنسبة للمحفظة، MDX مثالي: تكتب بسرعة، والعرض نظيف، وكل مقال يصبح صفحة قابلة للفهرسة من قبل Google. ثلاث إلى خمس مقالات تقنية جيدة تكفي للبدء في جذب حركة البحث.
| الصيغة | النص | مكونات React | الاستخدام النموذجي |
|---|---|---|---|
| HTML خام | مطول | لا | صفحات ثابتة بسيطة |
| Markdown (.md) | سريع | لا | التوثيق، الملاحظات |
| MDX (.mdx) | سريع | نعم | المدونة التقنية، المحفظة |
تثبيت MDX في Next.js
يوفر Next.js حزمة رسمية. نثبت الاعتماديات ثم نربطها في الإعدادات:
إنشاء مشروع Next.js مع Tailwind
الأهداف التعليمية
- إنشاء مشروع باستخدام
create-next-app - تحديد المجلدات الرئيسية في App Router
- فهم دور
layout.tsxوpage.tsx - التحقق من تهيئة Tailwind بشكل صحيح
- تشغيل المشروع وعرضه محليًا
المتطلبات المسبقة: تثبيت Node.js
قبل كل شيء، تحقق من تثبيت Node.js (الإصدار 18.17 أو أعلى). Next.js 14 لا يعمل مع الإصدارات الأقدم.
| الملف / المجلد | الدور |
|---|---|
app/layout.tsx | التخطيط الجذري المشترك بين جميع الصفحات (html، body، الخطوط). |
app/page.tsx | الصفحة الرئيسية، المسار /. |
app/globals.css | الأنماط العامة، توجيهات Tailwind. |
public/ | الملفات الثابتة (الصور، favicon) المقدمة من الجذر. |
tailwind.config.ts | تهيئة Tailwind (السمة، الألوان). |
next.config.js | تهيئة Next.js. |
layout.tsx
يغلف جميع الصفحات. هنا نحدد هيكل HTML المشترك، الخطوط والبيانات الوصفية الافتراضية.
page.tsx
المحتوى الخاص بمسار معين. كل مجلد يحتوي على page.tsx يصبح عنوان URL قابل للوصول.
التحقق من Tailwind
افتح app/globals.css. يجب أن تكون توجيهات Tailwind الثلاثة موجودة في أعلى الملف:
"use client" فقط عند الحاجة إلى التفاعل.التثبيت والتهيئة مع Next.js
components.json، وإضافة أول مكون عبر CLI.الأهداف التعليمية
- تشغيل
npx shadcn@latest initوالإجابة على الأسئلة - فهم دور
components.json - تحديد متغيرات CSS الخاصة بالسمة المضافة
- إضافة مكون باستخدام
shadcn add - استخدام الأداة المساعدة
cn()
الخطوة 1: تهيئة shadcn
من جذر مشروع Next.js، شغّل أمر التهيئة. سيطرح بعض أسئلة التهيئة.
ملف components.json
يخبر هذا الملف CLI بمكان وضع المكونات وأي الاصطلاحات يجب اتباعها. نادرًا ما تعدلّه، لكن يجب فهمه.
لماذا هو مفيد
يمكنك تمرير className إلى مكون لتجاوز أنماطه دون كسر الأنماط الأصلية.
@/components/...، تحقق من تهيئة الاسم المستعار @/* بشكل صحيح في tsconfig.json. هذا السبب الأكثر شيوعًا للأخطاء بعد التهيئة.يغطي هذا المقال المقتطفات الأكثر فائدة — الدورة الكاملة Portfolio IA SEO Vercel (11 فصول، 46 درسًا، تمارين مصححة ومشروع نهائي) تأخذك حتى النهاية.
./acceder-au-cours-complet cours gratuit : Vibe Codingالأسئلة الشائعة
كم من الوقت يستغرق تعلم Portfolio IA SEO Vercel؟
هل هناك متطلبات مسبقة؟
من أين نبدأ عمليًا؟
📬 هل تريد تلقي هذا النوع من الأدلة كل أسبوع؟ اشترك مجانًا — كود حقيقي، بدون كلام زائد.