4b:I[88154,["5730","$1d","1041","$1e","8500","$1f","9845","$20","1370","$21","721","$22","8437","$23","99","$24","7186","$25","6152","$26","2724","$27","7814","$28","2238","$29","5551","$2a"],"default",1] 4a:T4c9,{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.nammy4u.com/article/الدليل-الشامل-للانتقال-من-Vite-إلى-Next.js-15:-تحسين-الأداء-وتهيئة-السيو-(SEO)"},"headline":"الدليل الشامل للانتقال من Vite إلى Next.js 15: تحسين الأداء وتهيئة السيو (SEO)","description":"دليل عملي خطوة بخطوة للانتقال من Vite إلى Next.js 15، يركز على تحسين الأداء باستخدام Server Components وStatic Generation، وتهيئة السيو عبر إدارة البيانات الوصف","image":[{"@type":"ImageObject","url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/2a4t9qdlbjp-1786059238286.jpg","width":1200,"height":630}],"datePublished":"2026-05-23T16:43:33.86576+00:00","dateModified":"2026-06-20T17:59:40.462326+00:00","author":{"@type":"Person","name":"Hani Omar","url":"https://www.nammy4u.com/user/hohani57"},"publisher":{"@type":"Organization","name":"نَمّي","logo":{"@type":"ImageObject","url":"https://www.nammy4u.com/logo.png"}},"inLanguage":"ar","articleSection":"برمجة"}4c:T1856,

لماذا تغادر Vite إلى Next.js 15؟ مقارنة سريعة

Vite هي أداة بناء سريعة وممتازة لتطبيقات الصفحة الواحدة (SPA). لكن عندما تحتاج إلى تحسين محركات البحث (SEO) وأداء أفضل للمستخدمين، يصبح Next.js 15 الخيار الأقوى. تخيل أن Vite كسيارة رياضية سريعة على مضمار مغلق، بينما Next.js 15 كسيارة دفع رباعي قادرة على السير في كل التضاريس – مع تحسين تلقائي للسيو وأداء فائق. Next.js يوفر Server Components (RSC) لتقليل حجم JavaScript، وStatic Generation لصفحات سريعة جداً، وAPI شاملة للسيو. إذا كنت تريد موقعاً يظهر في الصفحة الأولى لمحركات البحث، فالانتقال ضروري.

الخطوة الأولى: إعداد المشروع وهيكل الملفات

ابدأ بإنشاء مشروع Next.js 15 جديد باستخدام الأمر: npx create-next-app@latest my-app --typescript --tailwind --app. ستحصل على هيكل مجلدات مثل app/ للصفحات وpublic/ للأصول. في Vite، كنت تنظم الصفحات يدوياً؛ هنا يعتمد Next.js على نظام الملفات للتوجيه. انسخ ملفاتك من src/ إلى app/ مع تعديل المسارات. مثلاً، ملف src/pages/Home.jsx يصبح app/page.tsx. لا تنسَ تحديث ملفات التكوين مثل next.config.js لتفعيل تحسين الصور: images: { domains: ['example.com'] }.

تحويل التوجيه: من SPA إلى نظام الملفات

في Vite، كنت تستخدم React Router لتحديد المسارات. في Next.js 15، كل مجلد داخل app/ يمثل مساراً. مثلاً، app/about/page.tsx يعرض صفحة /about. لإنشاء مسار ديناميكي، استخدم الأقواس المربعة: app/blog/[slug]/page.tsx. هذا يشبه تحويل خريطة مرسومة باليد إلى نظام GPS تلقائي. انقل تعريفات المسارات من react-router-dom إلى هيكل الملفات، واستخدم useParams بدلاً من useParams من React Router. أيضاً، استخدم Link من Next.js بدلاً من Link من React Router للحصول على تنقل سريع مسبق التحميل.

استخدام Server Components وStatic Generation لتحسين الأداء

Server Components هي جوهرة Next.js 15. افتراضياً، كل المكونات في مجلد app/ هي Server Components، مما يعني أنها تُعرض على الخادم ولا تُرسل إلى العميل إلا كـ HTML. هذا يقلل حجم JavaScript بشكل كبير. مثلاً، إذا كان لديك صفحة مدونة تعرض بيانات من قاعدة بيانات، اكتبها كـ Server Component: async function BlogPage() { const posts = await fetch('https://api.example.com/posts'); return ... }. لتحسين أكبر، استخدم generateStaticParams لإنشاء صفحات ساكنة مسبقاً: export async function generateStaticParams() { const posts = await fetch('...'); return posts.map(p => ({ slug: p.slug })); }. هذا يجعل الصفحات تُخدم من CDN بسرعة البرق.

تحسين الأداء: الصور والتحميل البطيء

Next.js يوفر مكون Image محسّناً تلقائياً للتحميل البطيء والتنسيق الحديث (WebP). استبدل <img> بـ <Image> مع تحديد width وheight لتجنب تغيير التخطيط. مثال: <Image src='/hero.jpg' alt='Hero' width={1200} height={600} priority />. للتحميل البطيء للمكونات غير المرئية، استخدم dynamic مع ssr: false: const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false });. هذا يضمن أن المستخدم لا يحمل ما لا يراه.

تهيئة السيو: إدارة البيانات الوصفية وخرائط الموقع

Next.js 15 يقدم واجهة برمجية (API) قوية للسيو. في كل صفحة، استخدم كائن metadata المصدر: export const metadata = { title: 'عنوان الصفحة', description: 'وصف الصفحة', openGraph: { title: '...', images: ['...'] } };. لإنشاء خريطة موقع ديناميكية، أنشئ ملف app/sitemap.ts يرجع مصفوفة من الكائنات: export default function sitemap() { return [{ url: 'https://example.com', lastModified: new Date(), changeFrequency: 'yearly', priority: 1 }]; }. أيضاً، أضف ملف app/robots.ts لتوجيه محركات البحث. هذه الأدوات تجعل موقعك جاهزاً للسيو دون تعقيد.

اختبار التطبيق ونشره

اختبر محلياً باستخدام npm run dev، ثم npm run build للتأكد من عدم وجود أخطاء. استخدم أدوات مثل Lighthouse لقياس الأداء والسيو. للنشر، أفضل خيار هو Vercel (منشئ Next.js) لأنه يدعم الميزات المتقدمة مثل ISR وEdge Functions. اربط مستودع GitHub وانشر بزر واحد. إذا كنت تفضل منصات أخرى، يمكنك نشر build ثابت باستخدام next export (لكن بعض الميزات مثل Server Components لن تعمل). بعد النشر، استخدم Google Search Console لمراقبة الزحف والفهرسة. الآن، موقعك أسرع وأكثر ظهوراً في محركات البحث.

36:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$4a"}}],["$","$L4b",null,{"initialPost":{"id":140,"slug":"الدليل-الشامل-للانتقال-من-Vite-إلى-Next.js-15:-تحسين-الأداء-وتهيئة-السيو-(SEO)","title":"الدليل الشامل للانتقال من Vite إلى Next.js 15: تحسين الأداء وتهيئة السيو (SEO)","video":null,"images":[],"status":"published","content":"$4c","cta_url":null,"excerpt":"دليل عملي خطوة بخطوة للانتقال من Vite إلى Next.js 15، يركز على تحسين الأداء باستخدام Server Components وStatic Generation، وتهيئة السيو عبر إدارة البيانات الوصفية وخرائط الموقع. يشمل مقارنة بين الأداتين، وإعداد المشروع، وتحويل التوجيه، واختبار النشر.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":null,"cta_price":null,"image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/2a4t9qdlbjp-1786059238286.jpg","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-05-23T16:43:33.86576+00:00","updated_at":"2026-06-20T17:59:40.462326+00:00","access_type":"free","category_id":20,"likes_count":0,"views_count":7,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["برمجة","تطوير","ذكاء_اصطناعي","Next.js","Vite","SEO"],"deliverable_url":null,"banner_image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/2a4t9qdlbjp-1786059238286.jpg","deliverable_name":null,"service_packages":[]},"initialComments":[],"initialRelatedPosts":[{"id":145,"slug":"كود-يكتب-نفسه:-كيف-تبني-نظامًا-ذاتي-التصحيح-للوكلاء-الذكاء-الاصطناعي","title":"كود يكتب نفسه: كيف تبني نظامًا ذاتي التصحيح للوكلاء الذكاء الاصطناعي","images":[],"status":"published","cta_url":null,"excerpt":"تخيل وكيل ذكاء اصطناعي لا يكتفي بتنفيذ المهام، بل يراقب أخطاءه ويصححها بنفسه. في هذا المقال، نتعمق في بناء أنظمة ذاتية التصحيح للوكلاء AI، من حلقة التغذية الراجعة إلى مولد التصحيحات، مع أمثلة عملية وتحديات واقعية.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":null,"cta_price":null,"image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/k4p89u0ng8r-1786058623204.jpg","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-05-31T17:32:19.813784+00:00","updated_at":"2026-06-20T17:59:40.462326+00:00","access_type":"free","category_id":20,"likes_count":0,"views_count":14,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["برمجة","ذكاء_اصطناعي","تطوير","إبداع"],"deliverable_url":null,"banner_image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/k4p89u0ng8r-1786058623204.jpg","deliverable_name":null,"service_packages":[]},{"id":163,"slug":"use-claude-code-free-omniroute-guide","title":"الدليل الشامل: كيف تستخدم Claude Code مجاناً تماماً عبر أداة Omniroute","images":[],"status":"published","cta_url":null,"excerpt":"تعلم كيفية استخدام Claude Code، مساعد الذكاء الاصطناعي الأقوى للمبرمجين، بشكل مجاني تماماً وبلا حدود باستخدام أداة Omniroute لتوجيه الـ API.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":null,"cta_price":null,"image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/qrf96bxt7j-1785971835603.jpg","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-08-04T19:25:50.002288+00:00","updated_at":"2026-08-04T19:25:50.002288+00:00","access_type":"free","category_id":20,"likes_count":7,"views_count":29,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["برمجة","أدوات","ذكاء اصطناعي"],"deliverable_url":null,"banner_image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/tfh00olxdt9-1785971832460.jpg","deliverable_name":null,"service_packages":[]},{"id":137,"slug":"البرمجة-بالصوت:-كيف-تبني-تطبيقات-كاملة-وأنت-تتحدث-دون-لمس-لوحة-المفاتيح؟","title":"البرمجة بالصوت: كيف تبني تطبيقات كاملة وأنت تتحدث دون لمس لوحة المفاتيح؟","images":[],"status":"published","cta_url":null,"excerpt":"تخيل أن تكتب أكواد برمجية معقدة بمجرد التحدث إلى حاسوبك. في هذا المقال، نستعرض أدوات البرمجة الصوتية المدعومة بالذكاء الاصطناعي التوليدي، وكيف يمكن للمطورين استخدامها لبناء تطبيقات كاملة دون لمس لوحة المفاتيح. دليل عملي ومقارنة بين أفضل الأدوات المتاحة.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":null,"cta_price":null,"image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/9phygp92qfh-1786059576054.jpg","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-05-22T20:16:39.801997+00:00","updated_at":"2026-06-20T17:59:40.462326+00:00","access_type":"free","category_id":20,"likes_count":0,"views_count":8,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["برمجة","تطوير","ذكاء_اصطناعي"],"deliverable_url":null,"banner_image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/9phygp92qfh-1786059576054.jpg","deliverable_name":null,"service_packages":[]}],"initialSiteInfo":{"id":1,"tagline":"بوابتك لرؤية أفضل","site_name":"نَمّي","store_url":null,"hero_title":"تبي نساعدك تكبر في مجالك","books_title":null,"footer_text":"مدونة عربية متخصصة في الذكاء الاصطناعي، ريادة الأعمال، واستراتيجيات تحقيق الدخل الرقمي.","tools_title":null,"total_views":234,"hero_subtitle":"هنا ما راح تقرأ كلام نظري معقد بنشاركك تجارب حقيقية، أدوات تنجز شغلك أسرع، وأفكار تقدر تطبقها وتستفيد منها من اليوم\r\n\r\n","social_github":"https://github.com","books_subtitle":null,"social_twitter":"https://twitter.com","tools_subtitle":null,"books_image_url":null,"social_linkedin":"https://linkedin.com","tools_image_url":null},"initialCategories":[{"id":84,"name":"AdSense","slug":"adsense","post_count":1},{"id":82,"name":"Edge Computing","slug":"edge-computing","post_count":1},{"id":91,"name":"Gpt","slug":"gpt","post_count":0},{"id":92,"name":"OpenAi","slug":"openai","post_count":1},{"id":85,"name":"Solopreneur","slug":"solopreneur","post_count":1},{"id":88,"name":"tempmail","slug":"tempmail","post_count":3},{"id":80,"name":"أعمال","slug":"أعمال","post_count":2},{"id":11,"name":"اداة","slug":"tool","post_count":0},{"id":19,"name":"استثمار","slug":"investment","post_count":0},{"id":16,"name":"اقتصاد","slug":"economy","post_count":4},{"id":24,"name":"اقتصاد رقمي","slug":"digital-economy","post_count":0},{"id":8,"name":"العمل الحر","slug":"freelancing","post_count":0},{"id":89,"name":"الميتافيرس","slug":"الميتافيرس","post_count":1},{"id":20,"name":"برمجة","slug":"programming","post_count":7},{"id":13,"name":"تجارة","slug":"commerce","post_count":0},{"id":14,"name":"تسويق","slug":"marketing","post_count":2},{"id":15,"name":"تصميم","slug":"design","post_count":0},{"id":79,"name":"تطوير","slug":"تطوير","post_count":4},{"id":23,"name":"تطوير الويب","slug":"web-development","post_count":0},{"id":10,"name":"تطوير ذات","slug":"development","post_count":0},{"id":1,"name":"تقنية","slug":"tech","post_count":0},{"id":17,"name":"تكنولوجيا","slug":"technology","post_count":0},{"id":21,"name":"حماية","slug":"حماية","post_count":0},{"id":5,"name":"ذكاء اصطناعي","slug":"ai","post_count":9},{"id":9,"name":"ربح من انترنت","slug":"earning","post_count":0},{"id":18,"name":"صحة","slug":"health","post_count":0},{"id":90,"name":"عادات","slug":"عادات","post_count":1},{"id":77,"name":"عام","slug":"عام","post_count":18},{"id":12,"name":"قصة","slug":"story","post_count":0},{"id":87,"name":"لعبة","slug":"لعبة","post_count":1}],"initialIsUnlocked":true,"initialUserPoints":null,"initialReadingProgress":0}]]