إذا كنت تدير مدونة طعام على WordPress، فأنت تعرف بالفعل الروتين. لديك إعلانات Mediavine أو AdThrive، وإضافة بطاقة وصفة مثل WP Recipe Maker أو Tasty Recipes، وربما 800+ مشاركة مع البيانات المنظمة، وموقع يحصل على درجة 34 في PageSpeed Insights للهاتف المحمول رغم جهودك مع مكونات التخزين المؤقت. تم إخبارك بـ "فقط قم بتحسين صورك" حوالي خمسين مرة. وفي الوقت نفسه، تتعطل مؤشرات Core Web Vitals لديك بترتيب البحث الخاص بك، وكل تحديث للمكون الإضافي يشعر وكأنه لعبة الروليت الروسية مع تخطيطك.

لقد قمت بترحيل عدة مدونات وصفات من WordPress إلى Next.js خلال السنتين الماضيتين، والنتائج كانت متسقة بشكل درامي: تحميل صفحات أسرع 2-3 مرات، درجات Lighthouse مثالية، والأهم من ذلك - حركة مرور تنمو فعلاً لأن Google تكافئ الأداء. لكن الترحيل ليس تافهاً. مدونات الوصفات لديها تحديات فريدة لن يغطيها دليل ترحيل WordPress-to-Next.js القياسي. تستعرض هذه المقالة العملية بأكملها، من استخراج البيانات إلى مخطط الوصفة إلى تكامل الإعلانات.

جدول المحتويات

ترحيل مدونة الوصفات الخاصة بك من WordPress إلى Next.js: دليل عملي

لماذا يترك مدونو الطعام WordPress

دعونا نكون صريحين حول ما يحدث. WordPress نفسه ليس المشكلة -- إنه ما أصبح عليه المدونات التقليدية على WordPress. عادة ما تبدو تثبيتة WordPress لمدونة طعام نموذجية كما يلي:

  • موضوع متميز (غالباً Flavor أو Flavor Pro أو موضوع فرعي قائم على Flavor)
  • WP Recipe Maker أو Tasty Recipes لبطاقات الوصفات
  • مكون إضافي لإدارة الإعلانات (أو حقن نصوص Mediavine/AdThrive)
  • مكون إضافي للتخزين المؤقت (WP Rocket أو W3 Total Cache أو LiteSpeed)
  • مكون إضافي لتحسين الصور (ShortPixel أو Imagify أو EWWW)
  • Yoast SEO أو Rank Math
  • مكونات إضافية لمشاركة اجتماعية
  • مكون إضافي لاختيار البريد الإلكتروني
  • مكون إضافي لزر القفز إلى الوصفة
  • مكون إضافي لطباعة الوصفات الصديقة

هذا 10+ مكونات إضافية قبل أن تبدأ حتى في الكتابة. يضيف كل واحد JavaScript و CSS والاستعلامات في قاعدة البيانات والتضاربات المحتملة. النتيجة؟ صفحة تحمل 3-4 ميجابايت من الأصول وتستغرق 6-8 ثوان لتصبح تفاعلية على الهاتف المحمول.

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

التكلفة الحقيقية لاعتماد المكون الإضافي

هناك شيء لا يتم مناقشته كثيراً: أنت لا تمتلك تنسيق بيانات الوصفة الخاصة بك. عند استخدام WP Recipe Maker، يتم تخزين وصفاتك في أنواع مشاركات مخصصة وحقول مخصصة مملوكة لهذا المكون الإضافي. إذا تم التخلي عن المكون الإضافي أو استحوذت عليه أو أجرت تغييرات كسريانية، فأنت عالق. رأيت هذا يحدث. تم الاستحواذ على Tasty Recipes من قبل WP Tasty، وتغيرت الأسعار، وتحولت الميزات. محتواك مقفل داخل هيكل بيانات شخص آخر.

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

ما تقوم بترحيله فعلياً

قبل لمس أي كود، تحتاج إلى جرد. تحديثات مدونة الوصفات أكثر تعقيداً من ترحيل المدونات القياسية بسبب البيانات المتضمنة:

نوع المحتوى مصدر WordPress تعقيد الترحيل
منشورات المدونة (السرد) wp_posts منخفض
بيانات الوصفة (المكونات والخطوات والأوقات) حقول مخصصة للمكون الإضافي عالي
صور الوصفات (البطل والخطوات) wp_uploads + postmeta متوسط
البيانات المنظمة (JSON-LD) تم إنشاؤها بواسطة المكون الإضافي عالي (يجب إعادة البناء)
الفئات/العلامات wp_terms منخفض
التعليقات wp_comments متوسط
الروابط الداخلية محتوى المشاركة متوسط
هيكل URL الروابط الثابتة حرج
أماكن الإعلانات hooks المكون الإضافي/الموضوع متوسط
نماذج التسجيل للبريد الإلكتروني اختصارات المكون الإضافي منخفض

بيانات الوصفة هي الجزء الصعب. كل شيء آخر هو منطقة ترحيل WordPress القياسية.

اختيار البنية الأساسية الخاصة بك

لديك عدة مسارات هنا، والمسار الصحيح يعتمد على راحتك التقنية والميزانية.

الخيار أ: Next.js + WordPress بدون رأس

احتفظ بـ WordPress كواجهة خلفية محتوى، لكن استخدمه بحتة عبر REST API أو WPGraphQL. يقوم واجهة Next.js الخاصة بك بجلب البيانات من WordPress في وقت البناء أو عند الطلب.

الايجابيات: تحتفظ بمحرر WordPress. لا يحتاج الكتاب إلى تعلم أي شيء جديد. بيانات WP Recipe Maker يمكن الوصول إليها عبر API.

السلبيات: أنت لا تزال تحافظ على تثبيتة WordPress. أنت لا تزال تدفع لاستضافتها. REST API يمكن أن يكون بطيء مع استعلامات الوصفة المعقدة.

الخيار ب: Next.js + نظام إدارة محتوى حديث بدون رأس

هاجر كل شيء خارج WordPress إلى نظام إدارة محتوى مخصص بدون رأس مثل Sanity أو Contentful أو Payload CMS. بناء واجهة أمامية في Next.js.

الايجابيات: فصل نظيف. نمذجة محتوى أفضل للوصفات. لا صيانة WordPress. استجابات API أسرع.

السلبيات: جهد ترحيل أكبر في البداية. محررو المحتوى يحتاجون إلى تعلم نظام إدارة محتوى جديد. تختلف التكاليف حسب اختيار CMS.

الخيار ج: Next.js + Markdown/MDX

للمدونات الأصغر (أقل من 200 منشور)، يمكنك تصدير كل شيء إلى ملفات MDX والذهاب بحتة ثابتة.

الايجابيات: صفر تكاليف CMS. سرعة خاطفة. كل شيء في التحكم في الإصدار.

السلبيات: لا يتسع بشكل جيد. محررو غير تقنيين لا يمكنهم استخدامه. لا معاينة فورية.

لمعظم مدونات الطعام مع 200+ وصفة، أوصي بالخيار ب مع Sanity كنظام إدارة محتوى. مرونة نمذجة المحتوى مثالية للوصفات، وتجربة التحرير رائعة للمطورين غير التقنيين، والتسعير معقول (تغطي الطبقة المجانية معظم مدونات الطعام). لقد بنينا عدة من هذه الأنظمة من خلال عمل تطوير نظام إدارة محتوى بدون رأس الخاص بنا، والنتائج تتحدث عن نفسها.

ترحيل مدونة الوصفات الخاصة بك من WordPress إلى Next.js: دليل عملي - البنية

استخراج بيانات الوصفات من WordPress

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

تصدير WP Recipe Maker

يخزن WP Recipe Maker الوصفات كنوع مشاركة مخصصة (wprm_recipe) مع البيانات في wp_postmeta. يمكنك التصدير عبر:

  1. تصدير WP Recipe Maker المدمج -- يعطيك ملف JSON، لكنه بتنسيقهم الملكي
  2. WPGraphQL + امتداد WP Recipe Maker -- الاستعلام عن بيانات الوصفة عبر GraphQL
  3. تصدير قاعدة البيانات مباشرة -- اكتب نصاً مخصصاً يستعلم قاعدة البيانات مباشرة

هنا نص Node.js أستخدمه لتحويل تصديرات WP Recipe Maker JSON إلى تنسيق نظيف:

const fs = require('fs');
const wprmData = JSON.parse(fs.readFileSync('./wprm-export.json', 'utf8'));

const recipes = wprmData.map((recipe) => ({
  title: recipe.name,
  slug: recipe.slug,
  summary: recipe.summary,
  prepTime: recipe.prep_time, // بالدقائق
  cookTime: recipe.cook_time,
  totalTime: recipe.total_time,
  servings: recipe.servings,
  servingsUnit: recipe.servings_unit,
  ingredients: recipe.ingredients.map((group) => ({
    groupName: group.name || 'Main',
    items: group.ingredients.map((ing) => ({
      amount: ing.amount,
      unit: ing.unit,
      name: ing.name,
      notes: ing.notes,
    })),
  })),
  instructions: recipe.instructions.map((group) => ({
    groupName: group.name || 'Instructions',
    steps: group.instructions.map((step) => ({
      text: step.text,
      image: step.image ? extractImageUrl(step.image) : null,
    })),
  })),
  nutrition: recipe.nutrition,
  notes: recipe.notes,
  video: recipe.video,
}));

fs.writeFileSync(
  './recipes-clean.json',
  JSON.stringify(recipes, null, 2)
);

تصدير Tasty Recipes

يخزن Tasty Recipes البيانات بشكل مختلف -- يستخدم جدول مخصص (wp_tasty_recipes) بدلاً من postmeta. ستحتاج إلى الوصول المباشر إلى قاعدة البيانات:

SELECT
  r.id,
  r.post_id,
  r.title,
  r.description,
  r.prep_time,
  r.cook_time,
  r.total_time,
  r.yield,
  r.ingredients,
  r.instructions,
  r.notes,
  r.nutrition
FROM wp_tasty_recipes r
JOIN wp_posts p ON r.post_id = p.ID
WHERE p.post_status = 'publish';

حقول ingredients و instructions مخزنة كنصوص HTML، لذا ستحتاج إلى تحليلها إلى بيانات منظمة. أستخدم cheerio لهذا:

const cheerio = require('cheerio');

function parseIngredients(html) {
  const $ = cheerio.load(html);
  const groups = [];
  let currentGroup = { name: 'Main', items: [] };

  $('li, h4, strong').each((_, el) => {
    if (el.tagName === 'h4' || (el.tagName === 'strong' && $(el).parent().is('p'))) {
      if (currentGroup.items.length > 0) groups.push(currentGroup);
      currentGroup = { name: $(el).text().trim(), items: [] };
    } else if (el.tagName === 'li') {
      currentGroup.items.push(parseIngredientLine($(el).text().trim()));
    }
  });

  if (currentGroup.items.length > 0) groups.push(currentGroup);
  return groups;
}

إعداد مدونة Next.js Recipe الخاصة بك

مع Next.js 15 (الإصدار المستقر الحالي اعتباراً من 2026)، لديك خيارات ممتازة لاستراتيجيات العرض. لمدونة الوصفات، أوصي بنهج مختلط:

  • Static Generation (SSG) لجميع صفحات الوصفات -- لا تتغير كثيراً
  • ISR (Incremental Static Regeneration) مع إعادة تحقق لمدة ساعة واحدة لصفحات الفئة/العلامة
  • Server Components للتخطيط والتنقل
npx create-next-app@latest my-recipe-blog --typescript --tailwind --app

هنا هيكل صفحة وصفة أساسي:

// app/recipes/[slug]/page.tsx
import { getRecipeBySlug, getAllRecipeSlugs } from '@/lib/recipes';
import { RecipeCard } from '@/components/RecipeCard';
import { RecipeJsonLd } from '@/components/RecipeJsonLd';
import { notFound } from 'next/navigation';

export async function generateStaticParams() {
  const slugs = await getAllRecipeSlugs();
  return slugs.map((slug) => ({ slug }));
}

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const recipe = await getRecipeBySlug(params.slug);
  if (!recipe) return {};

  return {
    title: `${recipe.title} | My Recipe Blog`,
    description: recipe.summary.slice(0, 155),
    openGraph: {
      images: [{ url: recipe.heroImage.url, width: 1200, height: 630 }],
    },
  };
}

export default async function RecipePage({ params }: { params: { slug: string } }) {
  const recipe = await getRecipeBySlug(params.slug);
  if (!recipe) notFound();

  return (
    <article>
      <RecipeJsonLd recipe={recipe} />
      {/* محتوى السرد (جزء المدونة) */}
      <div className="prose lg:prose-xl" dangerouslySetInnerHTML={{ __html: recipe.narrativeContent }} />
      {/* بطاقة الوصفة الفعلية */}
      <RecipeCard recipe={recipe} />
    </article>
  );
}

إذا كنت جديداً على تطوير Next.js أو تريد مساعدة احترافية مع الترحيل، تحقق من قدرات تطوير Next.js الخاصة بنا.

بناء مكونات الوصفة مع البيانات المنظمة

البيانات المنظمة غير قابلة للتفاوض لمدونات الوصفات. بدون علامات Recipe schema صالحة، لن تظهر في أرضية Google للوصفات أو المقتطفات الغنية أو Google Discover. هنا حيث تفشل الكثير من الترحيلات -- ينسى الناس إعادة بناء البيانات المنظمة التي كان WP Recipe Maker يولدها تلقائياً.

هنا مكون يولد صحيح JSON-LD للوصفات:

// components/RecipeJsonLd.tsx
import type { Recipe } from '@/types/recipe';

export function RecipeJsonLd({ recipe }: { recipe: Recipe }) {
  const jsonLd = {
    '@context': 'https://schema.org/',
    '@type': 'Recipe',
    name: recipe.title,
    image: recipe.images.map((img) => img.url),
    author: {
      '@type': 'Person',
      name: recipe.author.name,
    },
    datePublished: recipe.publishedAt,
    description: recipe.summary,
    prepTime: `PT${recipe.prepTime}M`,
    cookTime: `PT${recipe.cookTime}M`,
    totalTime: `PT${recipe.totalTime}M`,
    recipeYield: `${recipe.servings} ${recipe.servingsUnit}`,
    recipeCategory: recipe.category,
    recipeCuisine: recipe.cuisine,
    recipeIngredient: recipe.ingredients.flatMap((group) =>
      group.items.map((ing) =>
        `${ing.amount} ${ing.unit} ${ing.name}${ing.notes ? ` (${ing.notes})` : ''}`
      )
    ),
    recipeInstructions: recipe.instructions.flatMap((group) =>
      group.steps.map((step, i) => ({
        '@type': 'HowToStep',
        name: `Step ${i + 1}`,
        text: step.text,
        ...(step.image && { image: step.image.url }),
      }))
    ),
    ...(recipe.nutrition && {
      nutrition: {
        '@type': 'NutritionInformation',
        calories: recipe.nutrition.calories,
        fatContent: recipe.nutrition.fat,
        proteinContent: recipe.nutrition.protein,
        carbohydrateContent: recipe.nutrition.carbs,
      },
    }),
    ...(recipe.video && {
      video: {
        '@type': 'VideoObject',
        name: recipe.video.title,
        description: recipe.video.description,
        thumbnailUrl: recipe.video.thumbnail,
        contentUrl: recipe.video.url,
        uploadDate: recipe.video.uploadDate,
      },
    }),
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

تحقق من البيانات المنظمة الخاصة بك مع اختبار النتائج الغنية من Google بعد كل تغيير. لا تفترض أنها صحيحة لأنها تبدو صحيحة.

التعامل مع الصور والوسائط

مدونات الطعام كثيفة الصور. قد تحتوي مشاركة وصفة واحدة على 15-25 صورة. في الواقع، هنا حيث يتألق Next.js بشكل الأفضل -- المكون المدمج next/image يتعامل مع تحديد الحجم سريع الاستجابة وتحويل التنسيق (WebP/AVIF) والتحميل البطيء تلقائياً.

لكنك تحتاج إلى استراتيجية لصورك الموجودة:

  1. تصدير جميع الصور من wp-content/uploads/ -- تنظيمها عادة حسب السنة/الشهر
  2. تحميل إلى CDN أو تخزين سحابي -- Cloudinary أو Vercel Blob Storage أو AWS S3 + CloudFront
  3. تحديث جميع مراجع الصور في محتواك للإشارة إلى عناوين URL الجديدة

أوصي بقوة Cloudinary لمدونات الطعام. يسمح لك API تحويل الصور الخاصة بهم بخدمة صور محسنة على الطاير، وليس لديهم طبقة مجانية سخية (25 رصيد/شهر، الذي يغطي معظم مدونات الطعام). بالإضافة إلى ذلك، الاقتصاص التلقائي الخاص بهم ذكي بما يكفي للحفاظ على الطعام في المركز -- وهذا مهم أكثر مما قد تعتقد.

// lib/cloudinary.ts
export function getRecipeImageUrl(
  publicId: string,
  width: number = 800,
  height: number = 600
) {
  return `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD}/image/upload/c_fill,w_${width},h_${height},f_auto,q_auto/${publicId}`;
}

قائمة التحقق من ترحيل SEO

هذا هو الجزء الذي يبقي مدونو الطعام مستيقظين في الليل، وبحق. يمكن لترحيل سيء أن ينسف حركة المرور العضوية الخاصة بك لعدة أشهر. اتبع قائمة التحقق هذه بحق:

مهمة الأولوية التفاصيل
تعيين URL حرج إنشاء خريطة 1:1 كاملة لعناوين URL القديمة إلى عناوين URL الجديدة
إعادات توجيه 301 حرج إعادة توجيه كل عنوان URL قديم. كل واحد.
خريطة الموقع XML حرج إنشاء وتقديم إلى Google Search Console
التحقق من البيانات المنظمة حرج اختبر كل صفحة وصفة باستخدام اختبار النتائج الغنية
العلامات الكنسية عالية تأكد من أن كل صفحة لديها كنسية مرجعية ذاتية
تدقيق الارتباط الداخلي عالية تحديث جميع الروابط الداخلية في محتوى المنشور
نص بديل للصورة عالية الحفاظ على جميع نصوص بديلة موجودة أثناء الترحيل
وصف فوقي متوسط هاجر أو تحسين أوصاف فوقية موجودة
robots.txt متوسط تحديث والتحقق
العلامات الفوقية للوسائط الاجتماعية متوسط علامات OpenGraph و Twitter لكل وصفة
Google Search Console عالية تحقق من الملكية، أرسل خريطة الموقع، راقب
Analytics عالية ضع GA4 مع تتبع الحدث المناسب

مشكلة URL

عادة ما تستخدم مدونات الطعام في WordPress هياكل مثل /recipe-name/ أو /category/recipe-name/. مهما كان هيكل عنوان URL الحالي، احتفظ به. لا تكن ذكياً وتغير أنماط URL أثناء الترحيل. إذا كانت عناوين URL الخاصة بك تبدو حالياً مثل example.com/easy-chicken-tikka-masala/، يجب أن تكون عناوين URL الجديدة الخاصة بك Next.js متطابقة.

في next.config.js الخاص بك، قم بإعداد إعادات توجيه لأي عناوين URL يجب أن تتغير:

// next.config.js
module.exports = {
  async redirects() {
    return [
      // مثال: تغيير URL صفحة الفئة
      {
        source: '/category/:slug',
        destination: '/recipes/:slug',
        permanent: true,
      },
      // ترقيم WordPress
      {
        source: '/page/:num',
        destination: '/?page=:num',
        permanent: true,
      },
    ];
  },
};

تكامل شبكة الإعلانات

دعنا نتحدث عن الفيل في الغرفة. معظم مدونو الطعام يكسبون أموالهم من الإعلانات المعروضة عبر Mediavine أو Raptive (سابقاً AdThrive) أو شبكات مماثلة. تم تصميم هذه شبكات الإعلانات من أجل WordPress، والهجرة إلى إطار عمل JavaScript يضيف تعقيداً.

Mediavine على Next.js

أصدرت Mediavine Universal Player الخاصة بهم وتدعم المواقع غير WordPress، لكنك ستحتاج إلى:

  1. اتصل بممثل Mediavine الخاص بك قبل الترحيل لإعلامهم
  2. أضف نص الغلاف Mediavine إلى app/layout.tsx الخاص بك
  3. إنشاء مكونات وضع الإعلانات التي تحترم متطلباتهم
  4. اختبر بكثافة في بيئتهم المرحلية
// components/AdPlacement.tsx
'use client';

import { useEffect, useRef } from 'react';

export function AdPlacement({ id }: { id: string }) {
  const adRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Mediavine يملأ هذه divs ديناميكياً
    if (window.__mediavine_ad_settings) {
      window.__mediavine_ad_settings.refreshAd(id);
    }
  }, [id]);

  return <div ref={adRef} id={id} data-mediavine-ad="" />;
}

مهم: تحدث إلى شبكة الإعلانات الخاصة بك. قد يكون لبعضها متطلبات تقنية محددة لـ SPAs (تطبيقات صفحة واحدة). فريق Mediavine كان مفيداً في تجربتي، لكنك بحاجة إلى التواصل حول ما تفعله.

اعتبارات Raptive (AdThrive)

كان Raptive أبطأ في اعتناق الإعدادات الخالية من الرأس. اعتباراً من بداية 2026، يدعمون تطبيقات مخصصة لكن يتطلبون مراجعة تقنية. ميزانية 2-4 أسابيع لعملية الموافقة الخاصة بهم.

معايير الأداء: قبل وبعد

هنا بيانات حقيقية من ثلاث هجرات مدونة وصفات عملت عليها بين 2025 و 2026:

مؤشر WordPress (المتوسط) Next.js (المتوسط) التحسين
أداء Lighthouse (الهاتف المحمول) 31 94 +203%
أكبر رسم للمحتوى 4.8s 1.2s -75%
إجمالي وقت الحجب 1,850ms 45ms -97%
تحول التخطيط التراكمي 0.35 0.02 -94%
وزن الصفحة 3.8 MB 420 KB -89%
وقت التفاعل 8.2s 1.8s -78%
معدل اجتياز Core Web Vitals 22% من الصفحات 98% من الصفحات +345%

هذه الأرقام ليست منتقاة. إنها متوسطات عبر المدونات التي تحتوي على 400-1200 وصفة منشورة، تعمل إعلانات Mediavine على كلا الإصدارين. تم نشر نسخ Next.js على Vercel.

تأثير حركة المرور؟ شهدت إحدى المدونات زيادة بنسبة 47% في حركة البحث العضوي في غضون 3 أشهر من الترحيل، بشكل أساسي من تحسن مظهر أرضية الوصفات وتصنيفات الهاتف المحمول الأفضل.

اختيار نظام إدارة محتوى بدون رأس للوصفات

إذا كنت تسير في الاتجاه الصحيح لنظام إدارة محتوى بدون رأس (الخيار ب من قبل)، فإن اختيار نظام إدارة محتوى يعني الكثير لمحتوى الوصفات على وجه التحديد.

نظام إدارة محتوى نمذجة محتوى الوصفة تجربة المحرر التسعير (2026) الأفضل لـ
Sanity ممتازة (مخططات مخصصة) رائع مجاني حتى 100K طلب API التحكم الكامل في هيكل الوصفة
Contentful جيد (أنواع محتوى منظمة) جيد مجاني حتى 1M استدعاء API سير العمل المثبت
Payload CMS ممتازة (مستضافة ذاتياً) رائع مجاني (مفتوح المصدر) المطورون الذين يريدون ملكية كاملة
Strapi جيد (أنواع محتوى مخصصة) لائق مجاني (مستضاف ذاتياً) / Cloud من 29$/شهر هجرات واعية الميزانية
WordPress (بدون رأس) يرث الموجود مألوف تكاليف الاستضافة الموجودة الحد الأدنى من انقطاع المحرر

خياري الأول لمدونات الوصفات هو Sanity. نظام المخطط المخصص يسمح لك بنمذجة الوصفات بالضبط كما تريد، بما في ذلك مجموعات المكونات وصور الخطوات وبيانات التغذية وقوائم المعدات. محرر Portable Text مرن بما يكفي لمحتوى منشور المدونة السردي، وخط أنابيب الصور يتعامل مع التحويلات بشكل أصلي.

أنشأنا عدد قليل من مواقع الوصفات التي تعتمد على Sanity. إذا كنت تريد استكشاف هذا المسار، ألقِ نظرة على خدمات تطوير نظام إدارة محتوى بدون رأس الخاصة بنا أو تواصل معنا لمناقشة وضعك المحدد.

الأسئلة الشائعة

هل سأفقد تصنيفات Google الخاصة بي إذا انتقلت من WordPress إلى Next.js؟ ليس إذا فعلت ذلك بشكل صحيح. المفتاح هو الحفاظ على التكافؤ في URL (نفس عناوين URL)، وتنفيذ إعادات توجيه 301 مناسبة لأي عناوين URL يجب أن تتغير، والحفاظ على البيانات المنظمة الخاصة بك. قال جون مولر من Google مراراً وتكراراً أن تغيير نظام إدارة المحتوى الخاص بك لا يجب أن يؤثر على التصنيفات إذا بقيت المحتوى وعناوين URL كما هي. من الناحية العملية، رأيت تقلبات مؤقتة (1-2 أسبوع) متبوعة بتحسينات بسبب Core Web Vitals الأفضل.

هل يمكنني لا تزال استخدام WP Recipe Maker مع إعداد WordPress بدون رأس؟ نعم. WP Recipe Maker يعرض بيانات الوصفات عبر WordPress REST API. ستصل إلى حقول الوصفة كجزء من كائن المشاركة. ومع ذلك، أنت مسؤول عن عرض بطاقة الوصفة وإنشاء البيانات المنظمة على جانب Next.js -- المكون الإضافي يوفر فقط البيانات الأولية، وليس إخراج الواجهة الأمامية.

كم تكلفة ترحيل مدونة وصفات من WordPress إلى Next.js؟ يختلف اختلافاً كبيراً حسب التعقيد. قد تكلف مدونة بـ 200 وصفة مع تصميم بسيط 5000-10000 دولار لترحيل احترافي. قد تكلف مدونة بـ 1000+ وصفة مع ميزات مخصصة وتكامل إعلانات وتصميم معقد 15000-30000 دولار أو أكثر. تحقق من صفحة التسعير الخاصة بنا لتفاصيل محددة حول مشاريع ترحيل بدون رأس. DIY ممكن إذا كنت تقنياً، لكن ميزانية 2-4 أشهر من العمل بدوام جزئي.

هل تعمل Mediavine و Raptive مع Next.js؟ Raptive يدعم رسمياً المواقع غير WordPress وله وثائق لتكامل إطار عمل JavaScript. Raptive يدعم تطبيقات مخصصة لكن يتطلب مراجعة تقنية. كلاهما سيحتاج إلى عمل تكامل مخصص -- لا يمكنك فقط تثبيت مكون إضافي. اتصل بممثل شبكة الإعلانات الخاص بك قبل بدء الترحيل حتى يتمكنوا من توجيهك بشأن المتطلبات.

هل يجب أن أستخدم Next.js أو Astro لمدونة الوصفات الخاصة بي؟ كلاهما خيارات رائعة. Astro حجة أفضل للمواقع الثقيلة المحتوى التي لا تحتاج إلى الكثير من التفاعلية -- فهي تشحن JavaScript صفر افتراضياً. يمنحك Next.js مزيداً من المرونة للميزات التفاعلية (تحجيم الوصفات وتحويل الوحدة وإنشاء قائمة التسوق) وله نظام بيئي أكبر. إذا كانت مدونتك بشكل أساسي محتوى ثابت مع وصفات، فيستحق Astro النظر فيه. نقدم أيضاً تطوير Astro إذا كنت تريد استكشاف هذا المسار.

كيف أتعامل مع وظيفة طباعة الوصفات بدون مكون إضافي WordPress؟ قم ببناء ورقة أنماط طباعة ومكون محسّن للطباعة. في الواقع، أسهل مما تعتقد في Next.js لأن لديك السيطرة الكاملة على الترميز. استخدم قواعد CSS @media print لإخفاء التنقل والإعلانات ومحتوى السرد، مع عرض بطاقة الوصفة فقط. يمكنك أيضاً إنشاء مسار مكرس /recipes/[slug]/print الذي يعرض نسخة نظيفة ومحسنة للطباعة.

ماذا عن ميزات تحجيم الوصفات وتحويل الوحدات؟ هنا حيث يتألق Next.js حقاً مقارنة بـ WordPress. قم ببناء مكون عميل يأخذ كميات المكونات الأساسية ويضربها بناءً على محدد الوجبات. لتحويل الوحدة (US إلى متري)، أنشئ دالة실用 تعيين القياسات الطهي الشائعة. هذه الميزات التفاعلية تافهة في React لكنها تتطلب مكونات إضافية jQuery ثقيلة على WordPress. قم بتخزين كميات المكونات كبيانات منظمة (فصل amount و unit و name الحقول) بدلاً من نصوص عادية -- هذا يجعل المعالجة البرمجية ممكنة.