Si vous gérez un blog culinaire sur WordPress, vous connaissez déjà le problème. Vous avez des annonces Mediavine ou AdThrive, un plugin de carte de recette comme WP Recipe Maker ou Tasty Recipes, peut-être 800+ articles avec données structurées, et un site qui score 34 sur PageSpeed Insights mobile malgré vos meilleurs efforts avec les plugins de cache. On vous a dit « optimisez juste vos images » une cinquantaine de fois. Pendant ce temps, vos Core Web Vitals font chuter vos classements de recherche, et chaque mise à jour de plugin semble être une roulette russe pour votre mise en page.

J'ai migré plusieurs blogs de recettes de WordPress vers Next.js au cours des deux dernières années, et les résultats ont été constamment dramatiques : chargement des pages 2 à 3 fois plus rapide, scores Lighthouse parfaits, et -- plus important encore -- un trafic qui croît réellement parce que Google récompense la performance. Mais la migration n'est pas triviale. Les blogs de recettes ont des défis uniques que les guides de migration WordPress-vers-Next.js standard ne couvriront pas. Cet article parcoure l'ensemble du processus, de l'extraction de données au schéma de recette à l'intégration des annonces.

Table des matières

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

Pourquoi les blogueurs culinaires quittent WordPress

Soyons honnêtes à propos de ce qui se passe. WordPress n'est pas le problème -- c'est ce que les blogs de recettes sur WordPress sont devenus. Une installation WordPress typique d'un blog culinaire ressemble à ceci :

  • Un thème premium (souvent Flavor, Flavor Pro, ou un thème enfant basé sur Flavor)
  • WP Recipe Maker ou Tasty Recipes pour les cartes de recettes
  • Un plugin de gestion des annonces (ou injection de script Mediavine/AdThrive)
  • Un plugin de cache (WP Rocket, W3 Total Cache, ou LiteSpeed)
  • Un plugin d'optimisation d'images (ShortPixel, Imagify, ou EWWW)
  • Yoast SEO ou Rank Math
  • Plugins de partage social
  • Un plugin d'opt-in email
  • Plugin de bouton passer à la recette
  • Plugin de recette imprimable

C'est 10+ plugins avant même de commencer à écrire. Chacun ajoute du JavaScript, du CSS, des requêtes de base de données et des conflits potentiels. Le résultat ? Une page qui charge 3-4 MB d'actifs et prend 6-8 secondes pour devenir interactive sur mobile.

Google a été clair depuis les mises à jour de base de 2024 que l'expérience des pages compte plus que jamais. Les recherches de recettes sont extrêmement compétitives -- vous vous battez pour les extraits en vedette et les carrousels de recettes contre des centaines d'autres blogs. Si votre site est lent, vous perdez.

Le coût réel de la dépendance aux plugins

Voici quelque chose qui n'est pas assez discuté : vous ne possédez pas votre format de données de recette. Lorsque vous utilisez WP Recipe Maker, vos recettes sont stockées dans des types d'articles personnalisés et des champs personnalisés qui sont propriétaires de ce plugin. Si le plugin est abandonné, acquis ou apporte des modifications importantes, vous êtes coincé. J'ai vu cela se produire. Tasty Recipes a été acquis par WP Tasty, la tarification a changé, les fonctionnalités ont changé. Votre contenu est verrouillé dans la structure de données de quelqu'un d'autre.

Avec une approche headless, vos données de recette vivent dans un format structuré et portable que vous contrôlez.

Ce que vous migrez réellement

Avant de toucher à n'importe quel code, vous avez besoin d'un inventaire. Les migrations de blogs de recettes sont plus complexes que les migrations de blogs standard en raison des données impliquées :

Type de contenu Source WordPress Complexité de migration
Articles de blog (narratif) wp_posts Faible
Données de recette (ingrédients, étapes, temps) Champs personnalisés du plugin Élevée
Images de recettes (héros, étape par étape) wp_uploads + postmeta Moyenne
Données structurées (JSON-LD) Généré par plugin Élevée (à reconstruire)
Catégories/Tags wp_terms Faible
Commentaires wp_comments Moyenne
Liens internes Contenu de l'article Moyenne
Structure d'URL Liens permanents Critique
Placements publicitaires Hooks plugin/thème Moyenne
Formulaires d'inscription email Shortcodes plugin Faible

Les données de recette sont la partie difficile. Tout le reste est du territoire standard de migration WordPress.

Choisir votre architecture

Vous avez quelques chemins ici, et le bon dépend de votre confort technique et de votre budget.

Option A : Next.js + WordPress Headless

Gardez WordPress comme votre CMS, mais utilisez-le uniquement comme backend de contenu via l'API REST ou WPGraphQL. Votre frontend Next.js récupère les données de WordPress au moment de la construction ou à la demande.

Avantages : Vous gardez l'éditeur WordPress. Vos rédacteurs n'ont besoin d'apprendre rien de nouveau. Les données de WP Recipe Maker sont accessibles via l'API.

Inconvénients : Vous maintenez toujours une installation WordPress. Vous payez toujours pour l'héberger. L'API REST peut être lente avec des requêtes de recettes complexes.

Option B : Next.js + CMS Headless Moderne

Migrez tout de WordPress vers un CMS headless spécialisé comme Sanity, Contentful, ou Payload CMS. Construisez votre frontend dans Next.js.

Avantages : Rupture nette. Meilleure modélisation de contenu pour les recettes. Pas de maintenance WordPress. Réponses API plus rapides.

Inconvénients : Effort de migration initial plus important. Les éditeurs de contenu doivent apprendre un nouveau CMS. Le coût varie selon le choix du CMS.

Option C : Next.js + Markdown/MDX

Pour les blogs plus petits (moins de 200 articles), vous pouvez exporter tout en fichiers MDX et devenir complètement statique.

Avantages : Zéro coût CMS. Extrêmement rapide. Tout dans le contrôle de version.

Inconvénients : N'évolue pas bien. Les éditeurs non techniques ne peuvent pas l'utiliser. Pas d'aperçu en temps réel.

Pour la plupart des blogs culinaires avec 200+ recettes, je recommande l'Option B avec Sanity comme CMS. La flexibilité de modélisation de contenu est parfaite pour les recettes, l'expérience d'édition est excellente pour les non-développeurs, et la tarification est raisonnable (le niveau gratuit couvre la plupart des blogs culinaires). Nous avons construit plusieurs de ces configurations par le biais de notre travail de développement CMS headless, et les résultats parlent d'eux-mêmes.

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

Extraction des données de recettes de WordPress

C'est là que les choses deviennent intéressantes. Les plugins de recettes stockent les données différemment, vous devez donc savoir exactement avec quoi vous travaillez.

Export WP Recipe Maker

WP Recipe Maker stocke les recettes comme un type d'article personnalisé (wprm_recipe) avec des données dans wp_postmeta. Vous pouvez exporter via :

  1. Export intégré de WP Recipe Maker -- vous donne un fichier JSON, mais c'est dans leur format propriétaire
  2. WPGraphQL + extension WP Recipe Maker -- interroger les données de recette via GraphQL
  3. Export direct de la base de données -- écrire un script personnalisé qui interroge la base de données directement

Voici un script Node.js que j'utilise pour transformer les exports JSON de WP Recipe Maker en un format propre :

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

Export Tasty Recipes

Tasty Recipes stocke les données différemment -- il utilise une table personnalisée (wp_tasty_recipes) plutôt que postmeta. Vous aurez besoin d'un accès direct à la base de données :

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

Les champs ingredients et instructions sont stockés en tant que chaînes HTML, vous devrez donc les analyser dans des données structurées. J'utilise cheerio pour cela :

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

Configuration de votre blog de recettes Next.js

Avec Next.js 15 (la version stable actuelle en 2026), vous avez d'excellentes options pour les stratégies de rendu. Pour un blog de recettes, je recommande une approche hybride :

  • Génération statique (SSG) pour toutes les pages de recettes -- elles ne changent pas souvent
  • ISR (Incremental Static Regeneration) avec une revalidation d'1 heure pour les pages de catégories/tags
  • Composants serveur pour la mise en page et la navigation
npx create-next-app@latest my-recipe-blog --typescript --tailwind --app

Voici une structure de page de recette de base :

// 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} | Mon blog de recettes`,
    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} />
      {/* Contenu narratif (la partie article de blog) */}
      <div className="prose lg:prose-xl" dangerouslySetInnerHTML={{ __html: recipe.narrativeContent }} />
      {/* La carte de recette réelle */}
      <RecipeCard recipe={recipe} />
    </article>
  );
}

Si vous êtes nouveau au développement Next.js ou si vous souhaitez une aide professionnelle pour la migration, consultez nos capacités de développement Next.js.

Construire des composants de recettes avec données structurées

Les données structurées sont non négociables pour les blogs de recettes. Sans un balisage de schéma Recipe valide, vous n'apparaîtrez pas dans le carrousel de recettes de Google, les extraits enrichis ou Google Discover. C'est là que beaucoup de migrations se trompent -- les gens oublient de reconstruire les données structurées que WP Recipe Maker générait automatiquement.

Voici un composant qui génère du JSON-LD valide pour les recettes :

// 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: `Étape ${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) }}
    />
  );
}

Validez vos données structurées avec l'outil de test de résultats enrichis de Google après chaque modification. Ne supposez pas que c'est correct parce que cela semble correct.

Gestion des images et des médias

Les blogs culinaires sont lourds en images. Un seul article de recette peut avoir 15-25 images. C'est en fait là que Next.js brille le plus -- le composant next/image intégré gère automatiquement le dimensionnement réactif, la conversion de format (WebP/AVIF) et le chargement différé.

Mais vous avez besoin d'une stratégie pour vos images existantes :

  1. Exportez toutes les images de wp-content/uploads/ -- généralement organisées par année/mois
  2. Téléchargez vers un CDN ou un stockage cloud -- Cloudinary, Vercel Blob Storage, ou AWS S3 + CloudFront
  3. Mettez à jour toutes les références d'images dans votre contenu pour pointer vers les nouvelles URL

Je recommande vivement Cloudinary pour les blogs culinaires. Leur API de transformation vous permet de servir des images optimisées à la volée, et ils ont un niveau gratuit généreux (25 crédits/mois, ce qui couvre la plupart des blogs culinaires). De plus, leur recadrage automatique est assez intelligent pour garder les aliments centrés -- ce qui compte plus que vous ne le penseriez.

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

Liste de contrôle de migration SEO

C'est la partie qui tient les blogueurs culinaires éveillés la nuit, et à juste titre. Une migration mal exécutée peut faire tanker votre trafic organique pendant des mois. Suivez cette liste de contrôle religieusement :

Tâche Priorité Détails
Mappage d'URL Critique Créer une correspondance complète 1:1 des anciennes URL vers les nouvelles URL
Redirections 301 Critique Rediriger chaque ancienne URL. Chaque. Single. Une.
Plan du site XML Critique Générer et soumettre à Google Search Console
Validation des données structurées Critique Tester chaque page de recette avec l'outil de test de résultats enrichis
Balises canoniques Élevée S'assurer que chaque page a une référence canonique auto-référencée
Audit des liens internes Élevée Mettre à jour tous les liens internes dans le contenu de l'article
Texte alternatif des images Élevée Conserver tout le texte alternatif existant lors de la migration
Méta descriptions Moyenne Migrer ou améliorer les méta descriptions existantes
robots.txt Moyenne Mettre à jour et vérifier
Balises méta sociales Moyenne Balises OpenGraph et Twitter cards pour chaque recette
Google Search Console Élevée Vérifier la nouvelle propriété, soumettre le plan du site, surveiller
Analytics Élevée Configurer GA4 avec le suivi d'événements approprié

Le problème d'URL

Les blogs culinaires WordPress utilisent généralement des structures comme /recipe-name/ ou /category/recipe-name/. Quelle que soit votre structure actuelle, conservez-la. Ne devenez pas malin et ne changez pas les modèles d'URL lors de la migration. Si vos URL ressemblent actuellement à example.com/easy-chicken-tikka-masala/, vos nouvelles URL Next.js devraient être identiques.

Dans votre next.config.js, configurez les redirections pour toutes les URL qui doivent changer :

// next.config.js
module.exports = {
  async redirects() {
    return [
      // Exemple : changement d'URL de page de catégorie
      {
        source: '/category/:slug',
        destination: '/recipes/:slug',
        permanent: true,
      },
      // Pagination WordPress
      {
        source: '/page/:num',
        destination: '/?page=:num',
        permanent: true,
      },
    ];
  },
};

Intégration du réseau publicitaire

Parlons de l'éléphant dans la pièce. La plupart des blogueurs culinaires gagnent leur argent grâce aux annonces d'affichage via Mediavine, Raptive (anciennement AdThrive), ou des réseaux similaires. Ces réseaux publicitaires ont été conçus pour WordPress, et la migration vers un framework JavaScript ajoute de la complexité.

Mediavine sur Next.js

Mediavine a lancé son Universal Player et prend en charge les sites non-WordPress, mais vous devrez :

  1. Contactez votre représentant Mediavine avant la migration pour le lui faire savoir
  2. Ajouter le script wrapper Mediavine à votre app/layout.tsx
  3. Créer des composants de placement publicitaire qui respectent leurs exigences
  4. Tester en détail dans leur environnement 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 remplit dynamiquement ces divs
    if (window.__mediavine_ad_settings) {
      window.__mediavine_ad_settings.refreshAd(id);
    }
  }, [id]);

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

Important : Parlez à votre réseau publicitaire. Certains ont des exigences techniques spécifiques pour les SPA (single-page applications). L'équipe de Mediavine a été utile dans mon expérience, mais vous devez communiquer ce que vous faites.

Considérations Raptive (AdThrive)

Raptive a été plus lente à adopter les configurations headless. Dès le début de 2026, ils prennent en charge les implémentations personnalisées mais nécessitent un examen technique. Budget 2-4 semaines pour leur processus d'approbation.

Repères de performance : avant et après

Voici les données réelles de trois migrations de blogs de recettes sur lesquelles j'ai travaillé entre 2025 et 2026 :

| Métrique | WordPress (Moy.) | Next.js (Moy.) | Amélioration | |---|---|---| | Performance Lighthouse (Mobile) | 31 | 94 | +203% | | Largest Contentful Paint | 4,8s | 1,2s | -75% | | Total Blocking Time | 1 850 ms | 45 ms | -97% | | Cumulative Layout Shift | 0,35 | 0,02 | -94% | | Poids de la page | 3,8 MB | 420 KB | -89% | | Temps jusqu'à interactivité | 8,2s | 1,8s | -78% | | Taux de réussite Core Web Vitals | 22 % des pages | 98 % des pages | +345% |

Ces chiffres ne sont pas sélectionnés. Ce sont des moyennes sur les blogs avec 400-1200 recettes publiées, exécutant des annonces Mediavine sur les deux versions. Les versions Next.js ont été déployées sur Vercel.

L'impact sur le trafic ? Un blog a vu une augmentation de 47 % du trafic de recherche organique dans les 3 mois suivant la migration, principalement en raison de l'amélioration des apparitions dans le carrousel de recettes et des meilleurs classements mobiles.

Choisir un CMS headless pour le contenu des recettes

Si vous prenez la route du CMS headless (Option B de plus tôt), le choix de votre CMS compte beaucoup pour le contenu des recettes en particulier.

CMS Modélisation de contenu de recette Expérience d'éditeur Tarification (2026) Meilleur pour
Sanity Excellente (schémas personnalisés) Excellente Gratuit jusqu'à 100 K requêtes API Contrôle complet de la structure de recette
Contentful Bonne (types de contenu structuré) Bonne Gratuit jusqu'à 1M appels API Flux de travail établis
Payload CMS Excellente (auto-hébergé) Excellente Gratuit (open source) Les développeurs qui veulent la propriété complète
Strapi Bonne (types de contenu personnalisés) Décent Gratuit (auto-hébergé) / Cloud à partir de 29 $/mois Migrations soucieuses du budget
WordPress (headless) Hérite des existants Familier Coûts d'hébergement existants Perturbation d'éditeur minimale

Sanity est mon meilleur choix pour les blogs de recettes. Le système de schéma personnalisé vous permet de modéliser les recettes exactement comme vous le souhaitez, y compris les groupes d'ingrédients, les photos d'étapes, les données nutritionnelles et les listes d'équipement. L'éditeur Portable Text est assez flexible pour le contenu narratif du blog de recettes, et le pipeline d'images gère les transformations nativement.

Nous avons configuré pas mal de sites de recettes alimentés par Sanity. Si vous souhaitez explorer cette route, consultez nos services de développement CMS headless ou contactez-nous pour discuter de votre situation spécifique.

FAQ

Vais-je perdre mes classements Google si je migre de WordPress vers Next.js ?

Non, si vous le faites correctement. La clé est de maintenir la parité d'URL (mêmes URL), d'implémenter des redirections 301 appropriées pour toute URL qui doit changer, et de préserver vos données structurées. John Mueller de Google a dit à plusieurs reprises que changer votre CMS ne devrait pas affecter les classements si le contenu et les URL restent les mêmes. En pratique, j'ai vu des fluctuations temporaires (1-2 semaines) suivies d'améliorations en raison de meilleurs Core Web Vitals.

Puis-je toujours utiliser WP Recipe Maker avec une configuration WordPress headless ?

Oui. WP Recipe Maker expose les données de recette via l'API REST de WordPress. Vous accédez aux champs de recette dans le cadre de l'objet de l'article. Cependant, vous êtes responsable du rendu de la carte de recette et de la génération de données structurées du côté Next.js -- le plugin fournit uniquement les données brutes, pas la sortie frontend.

Combien coûte la migration d'un blog de recettes de WordPress vers Next.js ?

Cela varie considérablement selon la complexité. Un blog de 200 recettes avec un design simple pourrait coûter 5 000 $ à 10 000 $ pour une migration professionnelle. Un blog de 1000+ recettes avec des fonctionnalités personnalisées, l'intégration des annonces et un design complexe pourrait coûter 15 000 $ à 30 000 $ ou plus. Consultez notre page de tarification pour des détails spécifiques sur les projets de migration headless. Le DIY est possible si vous êtes technique, mais budgétisez 2-4 mois de travail à temps partiel.

Qu'en est-il de mes commentaires WordPress ? Puis-je les migrer ?

Vous pouvez. Exportez-les via l'API REST de WordPress ou WP-CLI, puis importez-les dans votre CMS headless ou passez à un système de commentaires tiers comme Disqus, Commento, ou Giscus. Honnêtement, la plupart des blogueurs culinaires avec lesquels j'ai travaillé utilisent la migration comme une occasion d'abandonner complètement les commentaires ou de passer à un système plus simple. Les sections de commentaires sur les blogs de recettes sont principalement « Puis-je substituer X à Y ? » ce qui pourrait être mieux servi par une section FAQ structurée sur chaque recette.

Mediavine et Raptive fonctionnent-ils avec Next.js ?

Mediavine prend officiellement en charge les sites non-WordPress et dispose de documentation pour l'intégration du framework JavaScript. Raptive prend en charge les implémentations personnalisées mais nécessite un examen technique. Les deux nécessiteront un travail d'intégration personnalisé -- vous ne pouvez pas simplement installer un plugin. Contactez votre représentant du réseau publicitaire avant de commencer la migration afin qu'il puisse vous guider sur les exigences.

Dois-je utiliser Next.js ou Astro pour mon blog de recettes ?

Les deux sont d'excellents choix. Astro est probablement plus adapté aux sites lourds en contenu qui ne nécessitent pas beaucoup d'interactivité -- il n'expédie zéro JavaScript par défaut. Next.js vous donne plus de flexibilité pour les fonctionnalités interactives (mise à l'échelle des recettes, conversion d'unités, génération de listes d'achat) et dispose d'un écosystème plus grand. Si votre blog est principalement du contenu statique avec des recettes, Astro vaut la peine d'être envisagé. Nous offrons également développement Astro si vous souhaitez explorer cette route.

Comment puis-je gérer la fonctionnalité d'impression de recettes sans un plugin WordPress ?

Construisez une feuille de style d'impression et un composant spécifique à l'impression. C'est en fait plus facile que vous ne le penseriez dans Next.js parce que vous avez le contrôle total sur le balisage. Utilisez les règles CSS @media print pour masquer la navigation, les annonces et le contenu narratif, affichant uniquement la carte de recette. Vous pouvez également créer une route dédiée /recipes/[slug]/print qui rend une version optimisée pour l'impression propre.

Qu'en est-il des fonctionnalités de mise à l'échelle de recettes et de conversion d'unités ?

C'est là que Next.js brille vraiment par rapport à WordPress. Créez un composant client qui prend les quantités d'ingrédients de base et les multiplie en fonction d'un sélecteur de portions. Pour la conversion d'unités (US vers métrique), créez une fonction utilitaire qui mappe les conversions de mesure culinaires courantes. Ces fonctionnalités interactives sont triviales dans React mais ont nécessité des plugins jQuery lourds sur WordPress. Stockez les quantités d'ingrédients comme données structurées (champs amount, unit et name séparés) plutôt que des chaînes de texte brut -- cela rend la manipulation programmatique possible.