Si tienes un blog de comida en WordPress, ya conoces la dinámica. Tienes anuncios de Mediavine o AdThrive, un plugin de tarjetas de recetas como WP Recipe Maker o Tasty Recipes, quizás más de 800 publicaciones con datos estructurados, y un sitio que obtiene un 34 en PageSpeed Insights para móviles a pesar de tus mejores esfuerzos con plugins de caché. Te han dicho que "simplemente optimices tus imágenes" unas cincuenta veces. Mientras tanto, tus Core Web Vitals están hundiendo tus posiciones en los buscadores, y cada actualización de plugin se siente como una ruleta rusa con tu diseño.

He migrado varios blogs de recetas de WordPress a Next.js en los últimos dos años, y los resultados han sido consistentemente dramáticos: tiempos de carga 2-3 veces más rápidos, puntuaciones perfectas en Lighthouse y, lo más importante, tráfico que realmente crece porque Google recompensa el rendimiento. Pero la migración no es trivial. Los blogs de recetas tienen desafíos únicos que una guía estándar de migración de WordPress a Next.js no cubrirá. Este artículo recorre todo el proceso, desde la extracción de datos hasta el esquema de recetas y la integración de anuncios.

Tabla de contenidos

Migrating Your WordPress Recipe Blog to Next.js: A Practical Guide

Por qué los bloggers de comida están abandonando WordPress

Seamos honestos sobre lo que está pasando. WordPress en sí no es el problema, sino lo que el blogging de recetas en WordPress se ha convertido. Una instalación típica de WordPress para un blog de comida tiene un aspecto similar a este:

  • Un tema premium (a menudo Flavor, Flavor Pro, o un tema hijo basado en Flavor)
  • WP Recipe Maker o Tasty Recipes para las tarjetas de recetas
  • Un plugin de gestión de anuncios (o inyección de scripts de Mediavine/AdThrive)
  • Un plugin de caché (WP Rocket, W3 Total Cache o LiteSpeed)
  • Un plugin de optimización de imágenes (ShortPixel, Imagify o EWWW)
  • Yoast SEO o Rank Math
  • Plugins para compartir en redes sociales
  • Un plugin de suscripción por correo electrónico
  • Plugin de botón "saltar a la receta"
  • Plugin de impresión de recetas

Son 10 o más plugins antes de empezar a escribir. Cada uno añade JavaScript, CSS, consultas a la base de datos y posibles conflictos. ¿El resultado? Una página que carga 3-4 MB de recursos y tarda 6-8 segundos en ser interactiva en móvil.

Google ha sido muy claro desde las Core Updates de 2024 de que la experiencia de página importa más que nunca. Las búsquedas de recetas son extremadamente competitivas: compites por fragmentos destacados y carruseles de recetas contra cientos de otros blogs. Si tu sitio es lento, pierdes.

El verdadero coste de depender de plugins

Aquí hay algo que no se discute lo suficiente: no eres dueño del formato de datos de tus recetas. Cuando usas WP Recipe Maker, tus recetas se almacenan en tipos de publicaciones personalizadas y campos personalizados que son propietarios de ese plugin. Si el plugin queda abandonado, es adquirido o introduce cambios incompatibles, estás atascado. He visto que esto ocurre. Tasty Recipes fue adquirido por WP Tasty, los precios cambiaron, las funciones se modificaron. Tu contenido está encerrado dentro de la estructura de datos de otra persona.

Con un enfoque headless, los datos de tus recetas viven en un formato estructurado y portátil que tú controlas.

Qué estás migrando realmente

Antes de tocar ningún código, necesitas un inventario. Las migraciones de blogs de recetas son más complejas que las migraciones de blogs estándar debido a los datos involucrados:

Tipo de contenido Origen en WordPress Complejidad de la migración
Publicaciones del blog (narrativa) wp_posts Baja
Datos de la receta (ingredientes, pasos, tiempos) Campos personalizados del plugin Alta
Imágenes de la receta (principal, paso a paso) wp_uploads + postmeta Media
Datos estructurados (JSON-LD) Generados por el plugin Alta (deben reconstruirse)
Categorías/Etiquetas wp_terms Baja
Comentarios wp_comments Media
Enlaces internos Contenido de la publicación Media
Estructura de URLs Permalinks Crítica
Ubicaciones de anuncios Hooks del plugin/tema Media
Formularios de suscripción por correo Shortcodes del plugin Baja

Los datos de las recetas son la parte difícil. Todo lo demás es territorio estándar de migración de WordPress.

Elegir tu arquitectura

Tienes varios caminos aquí, y el correcto depende de tu comodidad técnica y tu presupuesto.

Opción A: Next.js + WordPress headless

Mantén WordPress como tu CMS, pero úsalo únicamente como backend de contenido a través de la API REST o WPGraphQL. Tu frontend en Next.js obtiene los datos de WordPress en tiempo de compilación o bajo demanda.

Ventajas: Conservas el editor de WordPress. Tus redactores no necesitan aprender nada nuevo. Los datos de WP Recipe Maker son accesibles a través de la API.

Inconvenientes: Sigues manteniendo una instalación de WordPress. Sigues pagando por alojarla. La API REST puede ser lenta con consultas de recetas complejas.

Opción B: Next.js + CMS headless moderno

Migra todo fuera de WordPress a un CMS headless diseñado específicamente para ello, como Sanity, Contentful o Payload CMS. Construye tu frontend en Next.js.

Ventajas: Ruptura limpia. Mejor modelado de contenido para recetas. Sin mantenimiento de WordPress. Respuestas de API más rápidas.

Inconvenientes: Mayor esfuerzo de migración inicial. Los editores de contenido necesitan aprender un CMS nuevo. El coste varía según el CMS elegido.

Opción C: Next.js + Markdown/MDX

Para blogs más pequeños (menos de 200 publicaciones), puedes exportar todo a archivos MDX y optar por un sitio completamente estático.

Ventajas: Coste cero del CMS. Velocidad extrema. Todo en control de versiones.

Inconvenientes: No escala bien. Los editores no técnicos no pueden usarlo. Sin vista previa en tiempo real.

Para la mayoría de los bloggers de comida con 200 o más recetas, recomiendo la Opción B con Sanity como CMS. La flexibilidad del modelado de contenido es perfecta para recetas, la experiencia de edición es excelente para no desarrolladores, y el precio es razonable (el nivel gratuito cubre la mayoría de los blogs de comida). Hemos construido varias de estas configuraciones a través de nuestro trabajo de desarrollo de CMS headless, y los resultados hablan por sí solos.

Migrating Your WordPress Recipe Blog to Next.js: A Practical Guide - architecture

Extraer datos de recetas de WordPress

Aquí es donde las cosas se ponen interesantes. Los plugins de recetas almacenan los datos de forma diferente, por lo que necesitas saber exactamente con qué estás trabajando.

Exportación de WP Recipe Maker

WP Recipe Maker almacena las recetas como un tipo de publicación personalizada (wprm_recipe) con datos en wp_postmeta. Puedes exportar mediante:

  1. La exportación integrada de WP Recipe Maker -- te proporciona un archivo JSON, pero está en su formato propietario
  2. WPGraphQL + extensión de WP Recipe Maker -- consulta los datos de recetas a través de GraphQL
  3. Exportación directa de la base de datos -- escribe un script personalizado que consulte la base de datos directamente

Aquí tienes un script de Node.js que uso para transformar las exportaciones JSON de WP Recipe Maker a un formato limpio:

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, // in minutes
  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)
);

Exportación de Tasty Recipes

Tasty Recipes almacena los datos de forma diferente: utiliza una tabla personalizada (wp_tasty_recipes) en lugar de postmeta. Necesitarás acceso directo a la base de datos:

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';

Los campos ingredients e instructions se almacenan como cadenas HTML, por lo que necesitarás analizarlos y convertirlos en datos estructurados. Para eso uso 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;
}

Configurar tu blog de recetas en Next.js

Con Next.js 15 (la versión estable actual a partir de 2026), tienes excelentes opciones para las estrategias de renderizado. Para un blog de recetas, recomiendo un enfoque híbrido:

  • Generación estática (SSG) para todas las páginas de recetas, ya que no cambian con frecuencia
  • ISR (Incremental Static Regeneration) con una revalidación de 1 hora para las páginas de categorías/etiquetas
  • Server Components para el diseño y la navegación
npx create-next-app@latest my-recipe-blog --typescript --tailwind --app

Aquí tienes una estructura básica para la página de una receta:

// 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} />
      {/* Narrative content (the blog post part) */}
      <div className="prose lg:prose-xl" dangerouslySetInnerHTML={{ __html: recipe.narrativeContent }} />
      {/* The actual recipe card */}
      <RecipeCard recipe={recipe} />
    </article>
  );
}

Si eres nuevo en el desarrollo con Next.js o quieres ayuda profesional con la migración, consulta nuestras capacidades de desarrollo en Next.js.

Crear componentes de recetas con datos estructurados

Los datos estructurados son innegociables para los blogs de recetas. Sin un marcado Recipe schema válido, no aparecerás en el carrusel de recetas de Google, en los fragmentos enriquecidos ni en Google Discover. Aquí es donde muchas migraciones salen mal: la gente olvida reconstruir los datos estructurados que WP Recipe Maker generaba automáticamente.

Aquí tienes un componente que genera JSON-LD válido para recetas:

// 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) }}
    />
  );
}

Valida tus datos estructurados con la Prueba de Resultados Enriquecidos de Google después de cada cambio. No asumas que están correctos porque parecen bien.

Gestionar imágenes y medios

Los blogs de comida son ricos en imágenes. Una sola publicación de receta puede tener entre 15 y 25 imágenes. Aquí es donde Next.js brilla con más intensidad: el componente integrado next/image gestiona el tamaño responsivo, la conversión de formato (WebP/AVIF) y la carga diferida automáticamente.

Pero necesitas una estrategia para tus imágenes existentes:

  1. Exporta todas las imágenes de wp-content/uploads/, normalmente organizadas por año/mes
  2. Súbelas a una CDN o almacenamiento en la nube: Cloudinary, Vercel Blob Storage o AWS S3 + CloudFront
  3. Actualiza todas las referencias de imágenes en tu contenido para que apunten a las nuevas URLs

Recomiendo Cloudinary con firmeza para los blogs de comida. Su API de transformaciones te permite servir imágenes optimizadas al vuelo, y tienen un generoso nivel gratuito (25 créditos al mes, lo que cubre la mayoría de los blogs de comida). Además, su recorte automático es lo suficientemente inteligente como para mantener la comida centrada, lo que importa más de lo que podrías pensar.

// 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}`;
}

Lista de verificación de migración SEO

Esta es la parte que mantiene en vela a los bloggers de comida, y con razón. Una migración mal ejecutada puede hundir tu tráfico orgánico durante meses. Sigue esta lista de verificación al pie de la letra:

Tarea Prioridad Detalles
Mapeo de URLs Crítica Crea un mapa completo 1:1 de las URLs antiguas a las nuevas
Redirecciones 301 Crítica Redirige cada URL antigua. Cada. Una. De. Ellas.
Sitemap XML Crítica Genéralo y envíalo a Google Search Console
Validación de datos estructurados Crítica Prueba cada página de receta con la Prueba de Resultados Enriquecidos
Etiquetas canónicas Alta Asegúrate de que cada página tiene una canónica autorreferenciada
Auditoría de enlaces internos Alta Actualiza todos los enlaces internos en el contenido de las publicaciones
Texto alternativo de imágenes Alta Preserva todo el texto alternativo existente durante la migración
Meta descripciones Media Migra o mejora las meta descripciones existentes
robots.txt Media Actualiza y verifica
Metaetiquetas sociales Media OpenGraph y Twitter cards para cada receta
Google Search Console Alta Verifica la nueva propiedad, envía el sitemap y monitoriza
Analytics Alta Configura GA4 con seguimiento adecuado de eventos

El problema de las URLs

Los blogs de comida en WordPress suelen usar estructuras como /nombre-de-receta/ o /categoria/nombre-de-receta/. Sea cual sea tu estructura actual, mantenla. No seas listo cambiando los patrones de URL durante la migración. Si tus URLs actualmente tienen la forma example.com/easy-chicken-tikka-masala/, tus nuevas URLs en Next.js deben ser idénticas.

En tu next.config.js, configura redirecciones para cualquier URL que deba cambiar:

// next.config.js
module.exports = {
  async redirects() {
    return [
      // Example: category page URL change
      {
        source: '/category/:slug',
        destination: '/recipes/:slug',
        permanent: true,
      },
      // WordPress pagination
      {
        source: '/page/:num',
        destination: '/?page=:num',
        permanent: true,
      },
    ];
  },
};

Integración con redes publicitarias

Hablemos del elefante en la habitación. La mayoría de los bloggers de comida ganan dinero con anuncios gráficos a través de Mediavine, Raptive (anteriormente AdThrive) o redes similares. Estas redes publicitarias fueron diseñadas para WordPress, y migrar a un framework de JavaScript añade complejidad.

Mediavine en Next.js

Mediavine lanzó su Universal Player y admite sitios que no usan WordPress, pero necesitarás:

  1. Contactar con tu representante de Mediavine antes de la migración para informarle
  2. Añadir el envoltorio del script de Mediavine a tu app/layout.tsx
  3. Crear componentes de ubicación de anuncios que respeten sus requisitos
  4. Probar exhaustivamente en su entorno de staging
// components/AdPlacement.tsx
'use client';

import { useEffect, useRef } from 'react';

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

  useEffect(() => {
    // Mediavine dynamically fills these divs
    if (window.__mediavine_ad_settings) {
      window.__mediavine_ad_settings.refreshAd(id);
    }
  }, [id]);

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

Importante: Habla con tu red publicitaria. Algunas tienen requisitos técnicos específicos para las SPAs (aplicaciones de página única). El equipo de Mediavine ha sido de ayuda en mi experiencia, pero necesitas comunicarles lo que estás haciendo.

Consideraciones sobre Raptive (AdThrive)

Raptive ha sido más lenta en adoptar configuraciones headless. A principios de 2026, admiten implementaciones personalizadas pero requieren una revisión técnica. Reserva entre 2 y 4 semanas para su proceso de aprobación.

Métricas de rendimiento: antes y después

Aquí tienes datos reales de tres migraciones de blogs de recetas en las que trabajé entre 2025 y 2026:

Métrica WordPress (promedio) Next.js (promedio) Mejora
Rendimiento en Lighthouse (móvil) 31 94 +203%
Largest Contentful Paint 4,8 s 1,2 s -75%
Total Blocking Time 1.850 ms 45 ms -97%
Cumulative Layout Shift 0,35 0,02 -94%
Peso de la página 3,8 MB 420 KB -89%
Time to Interactive 8,2 s 1,8 s -78%
Tasa de aprobación de Core Web Vitals 22% de las páginas 98% de las páginas +345%

Estas cifras no están seleccionadas a conveniencia. Son promedios de blogs con entre 400 y 1200 recetas publicadas, ejecutando anuncios de Mediavine en ambas versiones. Las versiones en Next.js se desplegaron en Vercel.

¿El impacto en el tráfico? Un blog experimentó un aumento del 47% en el tráfico de búsqueda orgánica en los 3 meses posteriores a la migración, principalmente gracias a una mayor presencia en el carrusel de recetas y mejores posiciones en móvil.

Elegir un CMS headless para contenido de recetas

Si vas a optar por la ruta del CMS headless (Opción B de antes), tu elección de CMS importa mucho específicamente para el contenido de recetas.

CMS Modelado de contenido de recetas Experiencia del editor Precio (2026) Ideal para
Sanity Excelente (esquemas personalizados) Genial Gratuito hasta 100.000 solicitudes API Control total sobre la estructura de recetas
Contentful Bueno (tipos de contenido estructurado) Bueno Gratuito hasta 1M de llamadas API Flujos de trabajo establecidos
Payload CMS Excelente (autohospedado) Genial Gratuito (código abierto) Desarrolladores que quieren plena propiedad
Strapi Bueno (tipos de contenido personalizados) Decente Gratuito (autohospedado) / Cloud desde 29 $/mes Migraciones con presupuesto ajustado
WordPress (headless) Hereda el existente Familiar Costes de alojamiento existentes Mínima disrupción para los editores

Sanity es mi primera opción para blogs de recetas. El sistema de esquemas personalizados te permite modelar las recetas exactamente como quieras, incluyendo grupos de ingredientes, fotos de los pasos, datos nutricionales y listas de utensilios. El editor de Portable Text es lo suficientemente flexible para el contenido narrativo del blog, y el pipeline de imágenes gestiona las transformaciones de forma nativa.

Hemos configurado bastantes sitios de recetas con Sanity. Si quieres explorar esta ruta, echa un vistazo a nuestros servicios de desarrollo de CMS headless o ponte en contacto para hablar de tu situación específica.

Preguntas frecuentes

¿Perderé mis posiciones en Google si migro de WordPress a Next.js? No si lo haces correctamente. La clave es mantener la paridad de URLs (las mismas URLs), implementar redirecciones 301 adecuadas para cualquier URL que deba cambiar, y preservar tus datos estructurados. John Mueller de Google ha dicho repetidamente que cambiar tu CMS no debería afectar a las posiciones si el contenido y las URLs permanecen iguales. En la práctica, he visto fluctuaciones temporales (1-2 semanas) seguidas de mejoras gracias a los mejores Core Web Vitals.

¿Puedo seguir usando WP Recipe Maker con una configuración de WordPress headless? Sí. WP Recipe Maker expone los datos de las recetas a través de la API REST de WordPress. Accederás a los campos de la receta como parte del objeto de publicación. Sin embargo, eres responsable de renderizar la tarjeta de receta y generar los datos estructurados en el lado de Next.js: el plugin solo proporciona los datos en bruto, no la salida del frontend.

¿Cuánto cuesta migrar un blog de recetas de WordPress a Next.js? Varía enormemente según la complejidad. Un blog con 200 recetas y un diseño sencillo podría costar entre 5.000 y 10.000 dólares para una migración profesional. Un blog con más de 1000 recetas, características personalizadas, integración de anuncios y un diseño complejo podría superar los 15.000-30.000 dólares o más. Consulta nuestra página de precios para obtener información específica sobre proyectos de migración headless. La opción DIY es posible si tienes conocimientos técnicos, pero reserva entre 2 y 4 meses de trabajo a tiempo parcial.

¿Qué pasa con los comentarios de WordPress? ¿Puedo migrarlos? Puedes. Expórtalos a través de la API REST de WordPress o WP-CLI, y luego impórtalos a tu CMS headless o cambia a un sistema de comentarios de terceros como Disqus, Commento o Giscus. Honestamente, la mayoría de los bloggers de comida con los que he trabajado aprovechan la migración para eliminar los comentarios por completo o cambiar a un sistema más sencillo. Las secciones de comentarios en los blogs de recetas son principalmente "¿Puedo sustituir X por Y?", lo que podría estar mejor atendido por una sección de preguntas frecuentes estructurada en cada receta.

¿Funcionan Mediavine y Raptive con Next.js? Mediavine admite oficialmente sitios que no usan WordPress y tiene documentación para la integración con frameworks de JavaScript. Raptive admite implementaciones personalizadas pero requiere una revisión técnica. Ambos necesitarán trabajo de integración personalizado: no puedes simplemente instalar un plugin. Contacta con tu representante de la red publicitaria antes de comenzar la migración para que puedan orientarte sobre los requisitos.

¿Debería usar Next.js o Astro para mi blog de recetas? Ambos son excelentes opciones. Astro podría ser una mejor opción para sitios con mucho contenido que no necesitan mucha interactividad: no envía JavaScript por defecto. Next.js te ofrece más flexibilidad para funciones interactivas (escalado de recetas, conversión de unidades, generación de listas de la compra) y tiene un ecosistema más amplio. Si tu blog es principalmente contenido estático con recetas, vale la pena considerar Astro. También ofrecemos desarrollo con Astro si quieres explorar esa ruta.

¿Cómo gestiono la funcionalidad de impresión de recetas sin un plugin de WordPress? Crea una hoja de estilos de impresión y un componente específico para imprimir. En realidad es más fácil de lo que crees en Next.js porque tienes control total sobre el marcado. Usa reglas CSS @media print para ocultar la navegación, los anuncios y el contenido narrativo, mostrando solo la tarjeta de receta. También puedes crear una ruta dedicada /recipes/[slug]/print que renderice una versión limpia y optimizada para imprimir.

¿Qué pasa con el escalado de recetas y las funciones de conversión de unidades? Aquí es donde Next.js realmente brilla en comparación con WordPress. Crea un componente de cliente que tome las cantidades base de los ingredientes y las multiplique en función de un selector de porciones. Para la conversión de unidades (sistema americano a métrico), crea una función utilitaria que asigne las medidas culinarias comunes. Estas funciones interactivas son triviales en React, pero requerían pesados plugins de jQuery en WordPress. Almacena las cantidades de los ingredientes como datos estructurados (campos separados de amount, unit y name) en lugar de cadenas de texto plano: esto hace posible la manipulación programática.

Conclusión clave: Migra los blogs de recetas a Next.js para mejorar los Core Web Vitals y el SEO.