
<Card
  title="🎯 Análisis de Competencia SEO: Descubre Oportunidades y Domina tu Nicho"
  description="Aprende estrategias avanzadas para analizar a fondo a tus competidores y utilizar esa inteligencia para fortalecer tu propia estrategia SEO."
  icon="Target"
>
  Entender a tu competencia es un pilar fundamental del SEO. Este análisis te permite identificar sus fortalezas y debilidades, descubrir oportunidades de palabras clave y contenido, y, en última instancia, superarlos en los rankings. Con 10xDev, puedes incluso usar **prompts de IA** para obtener insights rápidos sobre las tácticas de tus competidores.
</Card>

## Fundamentos del Análisis de Competencia SEO

Antes de sumergirte, es crucial entender a quién te enfrentas.

### Identificación Precisa de Competidores
No todos los que venden algo similar son tus competidores SEO directos.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8"> {/* Grid justificado para comparar tipos de competidores */}
  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🎯 Competidores de Negocio (Directos)</h3>
    <p className="text-sm text-muted-foreground mb-2">Empresas que ofrecen productos o servicios muy similares a los tuyos, al mismo mercado objetivo.</p>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Mismo nicho de mercado.</li>
      <li>Soluciones/productos parecidos.</li>
      <li>Se dirigen a la misma audiencia.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🔍 Competidores SEO (Orgánicos)</h3>
    <p className="text-sm text-muted-foreground mb-2">Sitios web que compiten contigo en los resultados de búsqueda para tus palabras clave objetivo, aunque no ofrezcan exactamente lo mismo.</p>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Rankean para tus mismas keywords.</li>
      <li>Pueden tener autoridad similar.</li>
      <li>Crean contenido sobre temas parecidos.</li>
      <li>Incluyen blogs, medios, o afiliados.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">💡 Sitios de Referencia (Aspiracionales)</h3>
    <p className="text-sm text-muted-foreground mb-2">Líderes del sector o sitios con estrategias SEO ejemplares, aunque no compitan directamente contigo. Útiles para inspiración y mejores prácticas.</p>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Alta autoridad de dominio.</li>
      <li>Contenido de excepcional calidad.</li>
      <li>Implementan SEO técnico avanzado.</li>
      <li>Marcas reconocidas en la industria.</li>
    </ul>
  </Card>
</div>

**Cómo identificarlos:**
-   Busca tus keywords principales en Google y anota quiénes aparecen consistentemente en las primeras posiciones.
-   Utiliza herramientas SEO (Ahrefs, SEMrush, Moz) que identifican competidores orgánicos basados en el solapamiento de keywords.
-   Pregunta a tus clientes qué otras soluciones consideraron.

## Qué Analizar y Con Qué Herramientas

Una vez identificados tus competidores SEO clave, es hora de analizar sus estrategias.

### 1. Análisis del Perfil de Enlaces (Backlinks)
Los backlinks son un factor crucial de ranking. Analiza de dónde obtienen sus enlaces tus competidores.
-   **Qué buscar:**
    -   **Número total de backlinks y de dominios de referencia (referring domains):** Indica la popularidad general de su perfil de enlaces.
    -   **Calidad y Autoridad de los dominios enlazantes:** Enlaces de sitios con alta autoridad (ej. DA/DR alto) pesan más.
    -   **Anchor Texts (Textos Ancla) comunes:** ¿Qué palabras se usan para enlazarles? ¿Son de marca, de keyword, genéricos?
    -   **Tipos de Enlaces:** Proporción de `dofollow` vs. `nofollow`.
    -   **Velocidad de Adquisición de Enlaces (Link Velocity):** ¿Están ganando enlaces activamente?
    -   **Contexto de los Enlaces:** ¿Los enlaces provienen de contenido relevante?
-   **Herramientas:** Ahrefs (Site Explorer), SEMrush (Backlink Analytics), Moz Link Explorer, Majestic.

### 2. Análisis de la Estrategia de Contenido
El contenido es el vehículo para tus keywords y para atraer a tu audiencia.
-   **Qué buscar:**
    -   **Tipos de Contenido:** ¿Publican principalmente artículos de blog, guías, estudios de caso, videos, landing pages, herramientas gratuitas?
    -   **Temas Principales (Topic Clusters):** ¿Sobre qué temas se están posicionando como autoridad?
    -   **Calidad y Profundidad del Contenido:** ¿Es exhaustivo, bien investigado, original, y aporta valor real (E-E-A-T)?
    -   **Keywords Objetivo (Inferidas):** ¿Para qué palabras clave parecen estar optimizando su contenido? Analiza sus títulos, encabezados y densidad de términos.
    -   **Frecuencia de Publicación:** ¿Con qué regularidad publican contenido nuevo?
    -   **Formatos Utilizados:** ¿Usan muchas imágenes, videos, infografías?
    -   **Engagement del Usuario:** Si es visible, ¿cuántos comentarios o compartidos sociales reciben sus piezas clave?
-   **Herramientas:** Ahrefs (Content Explorer, Site Explorer), SEMrush (Topic Research, Content Audit), BuzzSumo. El análisis manual (leer su contenido) es indispensable.
    *Puedes usar los **prompts de IA de 10xDev** para analizar rápidamente los temas recurrentes y el tono del contenido de tus competidores.*

### 3. Auditoría de Rendimiento Web y SEO Técnico On-Page
Un sitio rápido y técnicamente sólido es fundamental para el SEO.
-   **Qué buscar en Rendimiento:**
    -   **Core Web Vitals (LCP, INP, CLS):** ¿Cómo es su rendimiento según estas métricas?
    -   **Velocidad de Carga General:** Tiempos de carga en móvil y escritorio.
    -   **Time To First Byte (TTFB):** Velocidad de respuesta del servidor.
    -   **Puntuaciones de PageSpeed Insights/Lighthouse:** En Performance, SEO, Accesibilidad, Mejores Prácticas.
-   **Qué buscar en SEO Técnico On-Page:**
    -   **Estructura de URLs:** ¿Son amigables y descriptivas?
    -   **Uso de Encabezados (H1-H6):** ¿Es jerárquico y optimizado?
    -   **Optimización de Metadatos:** ¿Sus meta títulos y descripciones son efectivos?
    -   **Enlazado Interno:** ¿Cómo conectan sus páginas entre sí?
    -   **Uso de Datos Estructurados (Schema.org):** ¿Están aprovechando los rich snippets?
    -   **Indexabilidad:** Revisa su `robots.txt` y la estructura de su `sitemap.xml`.
    -   **HTTPS:** ¿Todo el sitio es seguro?
-   **Herramientas:** Google PageSpeed Insights, GTmetrix, WebPageTest, Screaming Frog SEO Spider, Sitebulb, Ahrefs Site Audit, SEMrush Site Audit.

## Identificando Oportunidades: Análisis de Brechas (Gap Analysis)

El análisis de brechas te ayuda a encontrar áreas donde puedes superar a tu competencia.

### Tipos de Brechas a Buscar
-   **Keyword Gap (Brecha de Palabras Clave):**
    -   **Definición:** Palabras clave para las cuales tus competidores rankean (especialmente en buenas posiciones), pero tú no, o rankeas muy bajo.
    -   **Cómo encontrarla:** Herramientas como Ahrefs (Content Gap) o SEMrush (Keyword Gap Tool) te permiten comparar tu dominio con varios competidores.
    -   **Acción:** Considera crear contenido nuevo o optimizar contenido existente para estas keywords si son relevantes para tu negocio.
-   **Content Gap (Brecha de Contenido):**
    -   **Definición:** Temas o tipos de contenido que tus competidores cubren exitosamente, pero que tú has descuidado. También puede ser contenido que todos cubren de forma superficial, dándote la oportunidad de crear la pieza más completa.
    -   **Cómo encontrarla:** Analiza los temas y formatos más populares de tus competidores. Lee los comentarios en sus blogs para ver qué preguntas no están respondiendo.
    -   **Acción:** Crea contenido superior que llene esos vacíos o aborde los temas desde un ángulo único o más profundo.
-   **Link Gap (Brecha de Backlinks):**
    -   **Definición:** Sitios web que enlazan a múltiples competidores tuyos, pero no a ti.
    -   **Cómo encontrarla:** Herramientas como Ahrefs (Link Intersect) o SEMrush (Backlink Gap Tool).
    -   **Acción:** Estos sitios son prospectos ideales para tus campañas de link building, ya que han demostrado interés en contenido similar al tuyo.

### Creación de un Plan de Acción
Una vez identificadas las brechas y oportunidades:
1.  **Prioriza las Oportunidades:** Evalúa cada oportunidad basada en:
    -   **Relevancia para tu negocio:** ¿Atraerá al público correcto?
    -   **Volumen de Búsqueda/Tráfico Potencial:** ¿Es significativo?
    -   **Dificultad de Keyword/Competencia:** ¿Es realista competir?
    -   **Intención de Búsqueda:** ¿Se alinea con tus objetivos de conversión?
    -   **Recursos Necesarios:** ¿Cuánto esfuerzo requerirá (tiempo, dinero)?
2.  **Define Tareas Específicas:** Por ejemplo: "Crear un artículo de blog optimizado para la keyword X", "Mejorar la velocidad de carga de la página Y", "Contactar al sitio Z para una colaboración de enlace".
3.  **Asigna Responsables y Plazos:** Claridad en quién hace qué y para cuándo.
4.  **Establece KPIs (Indicadores Clave de Rendimiento):** ¿Cómo medirás el éxito de cada acción (ej. ranking para keyword X, tráfico a nueva página, backlinks obtenidos)?

## Monitorización Continua de la Competencia

El panorama SEO cambia constantemente. Necesitas monitorizar a tus competidores de forma regular.

### Qué Monitorizar
-   **Cambios en Rankings:** ¿Han subido o bajado para keywords importantes? ¿Han empezado a rankear para nuevas keywords?
-   **Nuevo Contenido Publicado:** ¿Qué temas están cubriendo? ¿Con qué frecuencia?
-   **Nuevos Backlinks Significativos:** ¿Han conseguido enlaces de sitios importantes? ¿De qué tipo?
-   **Cambios Técnicos en su Sitio Web:** ¿Han rediseñado su web? ¿Han implementado nuevas tecnologías o cambios estructurales?
-   **Estrategias de Marketing y Promociones:** ¿Están lanzando nuevas campañas que podrían impactar su SEO?

### Configuración de Alertas
-   **Google Alerts:** Para menciones de marca de tus competidores o para keywords específicas.
-   **Alertas en Herramientas SEO:** Muchas herramientas premium (Ahrefs, SEMrush, Moz) permiten configurar alertas para:
    -   Nuevas keywords para las que un competidor empieza a rankear.
    -   Pérdida o ganancia de backlinks importantes.
    -   Menciones de marca.
    -   Cambios significativos en su tráfico estimado.

## Mejores Prácticas para un Análisis Efectivo

### Frecuencia del Análisis
-   **Seguimiento Ligero (Semanal/Quincenal):** Revisa alertas, cambios importantes en rankings para tus keywords top, y nuevo contenido de tus 2-3 principales competidores.
-   **Análisis Profundo (Mensual/Trimestral):** Realiza un análisis más exhaustivo de backlinks, contenido y aspectos técnicos. Revisa tu análisis de brechas.

### Documentación y Registro
Mantén un registro de tus análisis y los cambios que observas en tus competidores. Esto te ayudará a:
-   Identificar patrones en sus estrategias.
-   Ver qué tácticas les funcionan (o no).
-   Medir el impacto de tus propias acciones en relación con ellos.
-   Mantener un historial para futuras referencias.
    *Un simple Google Sheet o un documento en Notion puede ser suficiente para empezar.*

<Callout type="success" title="Convierte Insights en Acción!">
El análisis de la competencia SEO no es un ejercicio pasivo. Su verdadero valor reside en convertir los insights obtenidos en acciones concretas que mejoren tu propia estrategia SEO y te ayuden a ganar visibilidad. ¡Usa esta información para tomar decisiones más inteligentes y estratégicas!
</Callout>

<Callout type="info" title="Recursos Adicionales en 10xDev">
-   Aprende a encontrar las palabras clave correctas: [Investigación Estratégica de Palabras Clave](/docs/seo/keywords)
-   Optimiza tu sitio con base en tus hallazgos: [SEO Técnico Avanzado en Next.js](/docs/seo/technical)
-   Desarrolla contenido que supere al de tus competidores: [Estrategia de Contenido SEO Avanzada](/docs/seo/content-strategy)
</Callout>


Guía completa para identificar, analizar y superar a tu competencia en SEO, y encontrar oportunidades para tu proyecto Next.js.

Análisis Estratégico de Competencia SEO para Superar a tus Rivales


<Card
  title="📊 Analítica Web y CRO con 10xDev: De Visitantes a Clientes"
  description="Aprende a medir el impacto de tu SEO, entender el comportamiento de tus usuarios y transformar visitantes en clientes leales con estrategias de CRO efectivas y las herramientas de 10xDev."
  icon="LineChart"
>
  El SEO atrae visitantes, pero la **Analítica Web** te dice qué hacen y la **Optimización de la Tasa de Conversión (CRO)** los convierte en clientes. Esta guía te enseñará a configurar la analítica, interpretar métricas vitales y aplicar técnicas de CRO para que tu tráfico orgánico se traduzca en resultados de negocio tangibles. Descubre cómo los **componentes UI y las estructuras optimizadas de 10xDev** pueden acelerar este proceso.
</Card>

## Fundamentos de Analítica y Conversión

Entender qué medir es el primer paso para optimizar.

### Métricas Clave a Monitorizar

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8"> {/* Grid justificado para comparar las 3 categorías de métricas */}
  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">📈 Métricas de Tráfico y Adquisición</h3>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>**Usuarios y Sesiones Orgánicas:** Nº de visitantes únicos y visitas desde motores de búsqueda.</li>
      <li>**Páginas por Sesión:** Promedio de páginas vistas en una visita.</li>
      <li>**Duración Media de la Sesión:** Tiempo promedio que los usuarios pasan en tu sitio.</li>
      <li>**Tasa de Rebote (o Tasa de Interacción en GA4):** Porcentaje de visitas de una sola página o sin interacción significativa.</li>
      <li>**Fuentes de Tráfico:** De dónde vienen tus usuarios (orgánico, directo, social, referido).</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🎯 Métricas de Conversión</h3>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>**Tasa de Conversión (general y por objetivo):** % de visitantes que completan una acción deseada.</li>
      <li>**Número de Conversiones:** Total de objetivos completados (ej. ventas, leads).</li>
      <li>**Valor por Conversión / Coste por Adquisición (CPA):** Rentabilidad de tus conversiones.</li>
      <li>**Retorno de la Inversión (ROI) de SEO:** Beneficios del SEO vs. costes.</li>
      <li>**Micro-conversiones:** Pequeñas acciones que indican progreso en el funnel (ver más abajo).</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🔍 Métricas de Comportamiento y Engagement</h3>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>**CTR en SERPs (Click-Through Rate):** % de impresiones que resultan en un clic desde Google.</li>
      <li>**Eventos Personalizados:** Interacciones específicas que rastreas (clics en botones, descargas, etc.).</li>
      <li>**Profundidad de Scroll:** Hasta dónde llegan los usuarios en tus páginas.</li>
      <li>**Tiempo en Página:** Cuánto tiempo pasan en páginas específicas.</li>
      <li>**Tasa de Salida (Exit Rate):** % de salidas desde una página específica.</li>
    </ul>
  </Card>
</div>

## Implementación de Analítica Web en Next.js (App Router)

Recomendamos Google Analytics 4 (GA4) por su flexibilidad y enfoque en eventos.

### Configuración de Google Analytics 4
La forma más común es añadir el script de GA4 a tu `app/layout.tsx` o a un componente cliente dedicado.

**1. Crea un Componente para Analytics:**
```tsx
// app/components/AnalyticsSetup.tsx
'use client'; // Este componente necesita ser un Client Component

import Script from 'next/script';
import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

interface AnalyticsSetupProps {
  measurementId: string;
}

export function AnalyticsSetup({ measurementId }: AnalyticsSetupProps) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    // Para rastrear cambios de ruta en SPA
    if (pathname && typeof window !== 'undefined' && window.gtag) {
      const url = pathname + (searchParams ? searchParams.toString() : '');
      window.gtag('config', measurementId, {
        page_path: url,
      });
    }
  }, [pathname, searchParams, measurementId]);

  if (!measurementId) {
    return null; // No renderizar nada si no hay ID
  }

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
        strategy="afterInteractive" // Carga el script después de que la página sea interactiva
      />
      <Script id="google-analytics-init" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${measurementId}', {
            page_path: window.location.pathname + window.location.search, // Envía la ruta inicial
          });
        `}
      </Script>
    </>
  );
}
```

**2. Importa y Usa en `app/layout.tsx`:**

```tsx
// app/layout.tsx
import { AnalyticsSetup } from '@/app/components/AnalyticsSetup'; // Ajusta la ruta

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        {GA_MEASUREMENT_ID && <AnalyticsSetup measurementId={GA_MEASUREMENT_ID} />}
      </body>
    </html>
  );
}
```

**Nota:** Recuerda configurar `NEXT_PUBLIC_GA_MEASUREMENT_ID` en tus variables de entorno.

<Callout type="warning" title="Consentimiento de Cookies (GDPR/CCPA)">
La implementación de analíticas requiere gestionar el consentimiento del usuario. Considera usar una plataforma de gestión de consentimiento (CMP) e integrar la carga de scripts de analíticas con el estado de consentimiento. Los **templates de 10xDev** a menudo incluyen placeholders o integraciones básicas para CMPs.
</Callout>

### Seguimiento de Eventos Personalizados en GA4

Rastrea interacciones específicas para entender mejor el comportamiento del usuario.

```ts
// lib/gtagHelper.ts (o utils/analytics.ts)

// Asegúrate que gtag esté disponible en el objeto window
declare global {
  interface Window {
    gtag?: (command: string, action: string, params?: Record<string, any>) => void;
  }
}

interface EventParams {
  action: string; // El nombre del evento que envías a GA4
  category?: string; // Agrupa eventos (ej. 'CTA Clicks', 'Form Submissions')
  label?: string; // Información adicional (ej. nombre del botón, nombre del formulario)
  value?: number; // Un valor numérico asociado (ej. precio, puntuación)
}

export const trackEvent = ({ action, category, label, value }: EventParams) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value,
    });
    console.log(`Event tracked: ${action}`, { category, label, value }); // Para debugging
  } else {
    console.log('GA4 gtag not available. Event not tracked:', { action, category, label, value });
  }
};

// Función específica para seguimiento de conversiones (eventos marcados como conversión en GA4)
export const trackConversion = ({
  eventName, // Nombre del evento marcado como conversión en GA4
  sendTo, // Opcional: ID específico de conversión de Google Ads, etc.
  transactionId, // Opcional: Para e-commerce
  value, // Opcional: Valor de la conversión
  currency = 'EUR', // Moneda por defecto
}: {
  eventName: string;
  sendTo?: string;
  transactionId?: string;
  value?: number;
  currency?: string;
}) => {
  if (typeof window !== 'undefined' && window.gtag) {
    const params: Record<string, any> = {
      value,
      currency,
      transaction_id: transactionId,
    };
    if (sendTo) {
      params.send_to = sendTo;
    }
    window.gtag('event', eventName, params);
    console.log(`Conversion tracked: ${eventName}`, params);
  }
};
```

## Optimización de la Tasa de Conversión (CRO): Convertir Visitantes

CRO es el proceso sistemático de aumentar el porcentaje de visitantes que realizan una acción deseada.

### Elementos Clave para la Conversión

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8"> {/* Grid para comparar elementos */}
<Card className="p-4 md:p-6">
<h4 className="text-lg font-semibold mb-2">✨ Propuesta de Valor Clara (UVP)</h4>
<p className="text-sm text-muted-foreground">Comunica de forma concisa y convincente por qué tu solución es la mejor. ¿Qué beneficio único y tangible ofreces que te diferencia?</p>
</Card>
<Card className="p-4 md:p-6">
<h4 className="text-lg font-semibold mb-2">🤝 Prueba Social (Social Proof)</h4>
<p className="text-sm text-muted-foreground">Testimonios, logos de clientes, estudios de caso, y reseñas aumentan la credibilidad. Los **bloques de UI de 10xDev** facilitan la integración elegante de estos elementos.</p>
</Card>
<Card className="p-4 md:p-6">
<h4 className="text-lg font-semibold mb-2">🎯 Diseño Enfocado en la Conversión</h4>
<p className="text-sm text-muted-foreground">Landing pages sin distracciones, con un flujo visual claro hacia la acción. Prioriza la claridad, la usabilidad y la velocidad. Explora las **plantillas de landing page de 10xDev**.</p>
</Card>
<Card className="p-4 md:p-6">
<h4 className="text-lg font-semibold mb-2">🧪 Mentalidad de Experimentación (A/B Testing)</h4>
<p className="text-sm text-muted-foreground">Prueba diferentes versiones de titulares, CTAs, imágenes, y diseños. Usa datos para tomar decisiones, no suposiciones.</p>
</Card>
</div>

### Optimización de Botones de Llamada a la Acción (CTA)

  - **Texto Persuasivo:** Usa verbos de acción, crea urgencia (sutilmente), y resalta el beneficio (ej. "Obtén tu Demo Gratuita" vs. "Enviar").
  - **Diseño Destacado:** Contraste de color, tamaño adecuado, espacio en blanco alrededor.
  - **Posicionamiento Estratégico:** Above the fold y repetidos si la página es larga.
  - **Seguimiento:** Usa `trackEvent` para medir clics en CTAs importantes.

```tsx
// app/components/OptimizedCTAButton.tsx
'use client';
import { trackEvent } from '@/lib/gtagHelper'; // Ajusta la ruta

interface CTAButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  text: string;
  eventName?: string; // Para tracking
  eventCategory?: string;
  eventLabel?: string;
  variant?: 'primary' | 'secondary';
}

export function OptimizedCTAButton({
  text,
  onClick,
  eventName,
  eventCategory = 'CTA',
  eventLabel,
  variant = 'primary',
  className,
  ...props
}: CTAButtonProps) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (eventName) {
      trackEvent({
        action: eventName,
        category: eventCategory,
        label: eventLabel || text, // Usa el texto del botón como label por defecto
      });
    }
    if (onClick) {
      onClick(e); // Ejecuta la acción original del botón si existe
    }
  };

  const baseStyle = "px-6 py-3 rounded-lg font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2";
  const primaryStyle = "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
  const secondaryStyle = "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400";

  return (
    <button
      onClick={handleClick}
      className={`${baseStyle} ${variant === 'primary' ? primaryStyle : secondaryStyle} ${className || ''}`}
      {...props}
    >
      {text}
    </button>
  );
}
```

### Optimización de Formularios

  - **Minimiza Campos:** Pide solo la información esencial para la conversión actual.
  - **Claridad:** Etiquetas claras, placeholders útiles, y ayuda contextual si es necesario.
  - **Validación Inline y Errores Amigables:** Informa al usuario de errores al instante y de forma clara.
  - **Feedback Visual:** Indica el estado de carga o éxito/error tras el envío.
  - **Diseño y Usabilidad:** Un formulario bien diseñado es menos intimidante y más fácil de completar.
    *Los **templates de 10xDev** incluyen ejemplos de formularios con estas prácticas.*

## Informes y Herramientas Clave

### Google Analytics 4 (GA4)

  - **Informes de Adquisición:** `Adquisición de tráfico`, `Adquisición de usuarios`.
  - **Informes de Interacción:** `Páginas y pantallas`, `Eventos`, `Conversiones`.
  - **Exploraciones (Explore):** Crea informes personalizados, como análisis de embudo (funnel exploration) para ver dónde abandonan los usuarios un proceso (ej. checkout, onboarding).

### Google Search Console (GSC)

  - **Rendimiento:** Clics, impresiones, CTR, posición media. Identifica keywords de oportunidad.
  - **Indexación:** Páginas indexadas, errores de indexación, sitemaps.
  - **Experiencia:** Core Web Vitals, usabilidad móvil.

### Herramientas Adicionales de CRO

  - **Mapas de Calor y Grabación de Sesiones:** Hotjar, Microsoft Clarity (gratuito), FullStory. Visualiza cómo interactúan los usuarios.
  - **Plataformas de A/B Testing:** Google Optimize (obsoleto, busca alternativas o integraciones GA4), VWO, Optimizely, Convert.com, LaunchDarkly (para feature flagging).
  - **Encuestas y Feedback:** Herramientas como Hotjar Surveys, Typeform, o simples encuestas en el sitio para recoger feedback directo.

## Seguimiento de Objetivos y Micro-conversiones

### Configuración de Conversiones en GA4

1.  **Identifica la Acción:** Envío de formulario, compra, clic en "Solicitar Demo", etc.
2.  **Envía un Evento:** Usa tu función `trackEvent` (o `trackConversion`) para enviar un evento a GA4 cuando ocurra la acción.
3.  **Marca como Conversión en GA4:** Ve a `Administrar > Eventos` en GA4, busca tu evento y activa el interruptor "Marcar como conversión".

### Seguimiento de Micro-conversiones en SaaS

Para un SaaS, rastrear acciones que indican interés es vital:

  - Visualización de la página de precios.
  - Descarga de un lead magnet (ebook, checklist).
  - Inicio de una prueba gratuita.
  - Interacción con una demo interactiva del producto.
  - Tiempo significativo en páginas de documentación clave.
  - Clics en features específicas en la landing page.

## El Proceso de Optimización Continua (CRO Loop)

<Card className="my-6 p-6">
<h3 className="text-xl font-semibold mb-3">🔄 El Ciclo Iterativo del CRO</h3>
<ol className="list-decimal pl-5 space-y-2 text-sm text-muted-foreground">
<li>**Investigación y Análisis:** Usa datos de GA4, GSC, mapas de calor, y feedback de usuarios para entender el comportamiento actual e identificar áreas de fricción o oportunidad.</li>
<li>**Formulación de Hipótesis:** Basado en el análisis, crea hipótesis claras sobre qué cambios podrían mejorar la conversión (ej. "Cambiar el texto del CTA de 'Enviar' a 'Obtener mi Guía Gratuita' aumentará los clics en un 15%").</li>
<li>**Priorización:** Evalúa las hipótesis por su impacto potencial, confianza en el resultado y facilidad de implementación (ej. usando un modelo ICE o PIE).</li>
<li>**Testing (A/B, Multivariante):** Implementa las variantes y prueba con una porción de tu tráfico. Asegura significancia estadística.</li>
<li>**Aprendizaje y Medición:** Analiza los resultados del test. ¿Se validó la hipótesis? ¿Qué aprendiste?</li>
<li>**Implementación (si es exitoso):** Despliega la variante ganadora para todos los usuarios.</li>
<li>**Iterar:** Comienza el ciclo de nuevo. El CRO es un proceso continuo.</li>
</ol>
</Card>

<Callout type="info" title="El Impacto Exponencial del CRO en SaaS">
En un modelo SaaS, incluso pequeñas mejoras en la tasa de conversión de visitantes a prueba gratuita, o de prueba a cliente de pago, pueden tener un efecto multiplicador en tus Ingresos Mensuales Recurrentes (MRR) y en el Valor de Vida del Cliente (LTV). Los **bloques de UI y templates de 10xDev** para landing pages, CTAs y formularios están diseñados con las mejores prácticas de conversión en mente, ayudándote a construir funnels más efectivos.
</Callout>

<Callout type="success" title="Recursos Adicionales para Profundizar">

  - [se quitó una URL no válida]
  - [se quitó una URL no válida]
  - [se quitó una URL no válida] (Próximamente)
</Callout>



Mide resultados, analiza métricas clave e implementa estrategias de CRO en tus aplicaciones Next.js con el apoyo de 10xDev.

Analítica Web y Optimización de Conversiones (CRO) en Next.js


¡Hola, 10xDev!

Sabemos que lanzar un SaaS o una aplicación web moderna implica, casi de forma inmediata, enfrentarse al desafío de la autenticación de usuarios. ¿Cómo aseguramos que solo los usuarios correctos accedan a sus datos? ¿Cómo hacemos que el proceso de registro e inicio de sesión sea seguro, fácil y, sobre todo, fiable?

Ignorar la autenticación robusta desde el principio es un error común que puede costar caro en seguridad y experiencia de usuario. Implementarla desde cero, además, suele ser un *boilerplate* tedioso que nos roba tiempo valioso.

Afortunadamente, herramientas como **Supabase** nos ofrecen una solución elegante y potente. No solo manejan la complejidad del *backend* de autenticación, sino que se integran a la perfección con *frameworks* como **Next.js**. Y si vamos un paso más allá y controlamos el envío de emails transaccionales, nuestra autenticación será *realmente* a prueba de balas (y de carpetas de spam).

En este artículo, vamos a sumergirnos de lleno en cómo configurar una autenticación completa con Supabase en Next.js, cubriendo los métodos populares (Email con One-Time Password y Google OAuth) y, lo más importante, **cómo configurar tu propio servidor SMTP** para garantizar que esos emails de confirmación o OTP lleguen siempre a la bandeja de entrada.

## ¿Por Qué Supabase para Autenticación en Next.js?

Supabase no es solo una base de datos. Es una *plataforma* que incluye autenticación, almacenamiento, *edge functions* y más. Su módulo Auth está construido sobre GoTrue y ofrece características como:

* Múltiples métodos de inicio de sesión (Email/Password, OTP, OAuth, Magic Links, Phone).
* Gestión de usuarios.
* Control de acceso basado en roles (mediante RLS en la base de datos).
* ¡Es *open source* y generosamente escalable en su plan gratuito!

Integrarlo con Next.js es muy sencillo, especialmente utilizando su SDK oficial `@supabase/auth-helpers-nextjs`.

## Configuración Básica en Next.js

Asumimos que ya tienes un proyecto Next.js funcional. Lo primero es instalar el SDK de Supabase:

```bash
npm install @supabase/supabase-js @supabase/auth-helpers-nextjs
# o
yarn add @supabase/supabase-js @supabase/auth-helpers-nextjs
```

Necesitarás tus credenciales de Supabase (URL del proyecto y `anon public key`). Las encontrarás en el panel de Supabase, en "Settings" -> "API".

Crea un cliente de Supabase en el lado del cliente y del servidor. Un patrón común es crear un archivo de utilidades, por ejemplo `utils/supabase/client.ts` y `utils/supabase/server.ts`:

```typescript
// utils/supabase/client.ts
import { createBrowserClient } from '@supabase/auth-helpers-nextjs'

export const createClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
```

```typescript
// utils/supabase/server.ts (para uso en Server Components, Route Handlers o API routes)
import { createServerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'

export const createClient = () => {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get: (name: string) => cookieStore.get(name)?.value,
        set: (name: string, value: string, options: any) => {
          cookieStore.set({ name, value, ...options })
        },
        remove: (name: string, options: any) => {
          cookieStore.set({ name, value, ...options })
        },
      },
    }
  )
}
```

Asegúrate de definir `NEXT_PUBLIC_SUPABASE_URL` y `NEXT_PUBLIC_SUPABASE_ANON_KEY` en tu archivo `.env.local`.

## Paso a Paso: Autenticación por Email con OTP

Este método es ideal para flujos de "magic link" o códigos temporales, evitando la necesidad de contraseñas.

1 **Habilitar Email Auth:** En tu panel de Supabase, ve a "Authentication" -> "Settings" y asegúrate de que "Email Sign-ins enabled" esté activado. Para OTP, habilita "Email OTP enabled".

2 **Crear la Interfaz:** Necesitarás un formulario simple donde el usuario ingrese su email.

3 **Enviar el OTP:** Usa el cliente de Supabase para enviar el código.

```typescript
// En tu componente o Route Handler
'use client' // Si usas App Router
import { useState } from 'react'
import { createClient } from '@/utils/supabase/client' // Ajusta la ruta

export default function MagicLinkSignIn() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState('')
  const supabase = createClient()

  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)
    setMessage('')

    const { error } = await supabase.auth.signInWithOtp({
      email: email,
      options: {
        emailRedirectTo: `${location.origin}/auth/callback`, // URL de callback post-autenticación
      },
    })

    if (error) {
      setMessage(`Error: ${error.message}`)
    } else {
      setMessage('¡Revisa tu email para el código de inicio de sesión!')
    }
    setLoading(false)
  }

  return (
    <form onSubmit={handleLogin}>
      <input
        type="email"
        placeholder="Tu email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Enviando...' : 'Enviar código'}
      </button>
      {message && <p>{message}</p>}
    </form>
  )
}
```

4 **Verificar el OTP:** En una página o componente separado (`/auth/callback` en este ejemplo) donde el usuario ingresará el código recibido.

```typescript
// En la página /auth/callback
'use client'
import { useEffect, useState } from 'react'
import { createClient } from '@/utils/supabase/client'
import { useRouter } from 'next/navigation' // o 'next/router' si usas Pages Router

export default function OTPVerification() {
  const [email, setEmail] = useState('') // Necesitas obtener el email, quizás de localStorage o params
  const [otp, setOtp] = useState('')
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState('')
  const supabase = createClient()
  const router = useRouter()

  // Deberías obtener el email del usuario aquí, quizás de algún estado previo o local storage
  useEffect(() => {
    // Ejemplo: obtener email de localStorage
    const storedEmail = localStorage.getItem('user_email_for_otp');
    if (storedEmail) setEmail(storedEmail);
  }, []);


  const handleVerifyOtp = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)
    setMessage('')

    const { data, error } = await supabase.auth.verifyOtp({
      email: email, // Asegúrate de tener el email
      token: otp,
      type: 'email', // O 'sms' si usas phone auth
    })

    if (error) {
      setMessage(`Error al verificar: ${error.message}`)
    } else {
      setMessage('¡Inicio de sesión exitoso!')
      // Redirigir al dashboard o página principal
      router.push('/dashboard')
    }
    setLoading(false)
  }

  return (
    <form onSubmit={handleVerifyOtp}>
      {/* Campo para el email (quizás oculto si ya lo tienes) */}
      <input
        type="email"
        placeholder="Tu email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
        disabled={loading}
      />
      <input
        type="text"
        placeholder="Código OTP"
        value={otp}
        onChange={(e) => setOtp(e.target.value)}
        required
        disabled={loading}
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Verificando...' : 'Verificar Código'}
      </button>
      {message && <p>{message}</p>}
    </form>
  )
}
```

## Paso a Paso: Configurando Google OAuth

Permitir que los usuarios se registren/inicien sesión con sus cuentas de Google simplifica enormemente el proceso.

1 **Configurar en Google Cloud Console:**
    * Ve a [Google Cloud Console](https://console.cloud.google.com/).
    * Crea un nuevo proyecto (o selecciona uno existente).
    * Navega a "APIs y servicios" -> "Credenciales".
    * Haz clic en "Crear credenciales" -> "ID de cliente de OAuth".
    * Configura la pantalla de consentimiento OAuth (si es la primera vez).
    * Elige "Aplicación web".
    * En "Orígenes de JavaScript autorizados", añade la URL de tu aplicación (ej: `http://localhost:3000` para desarrollo, `https://tudominio.com` para producción).
    * **MUY IMPORTANTE:** En "URIs de redireccionamiento autorizados", añade la URL de callback de Supabase. Esta sigue el patrón `[TU_URL_SUPABASE]/auth/v1/callback`. Por ejemplo: `https://abcdefghijkl.supabase.co/auth/v1/callback`.
    * Crea las credenciales y anota el "ID de cliente" y el "Secreto del cliente".

2 **Configurar en Supabase:**
    * En tu panel de Supabase, ve a "Authentication" -> "Settings".
    * Baja a la sección "OAuth 2.0 Providers".
    * Habilita "Google".
    * Introduce el "ID de cliente" y el "Secreto del cliente" que obtuviste de Google. Guarda los cambios.

3 **Implementar en Next.js:** Usa el cliente de Supabase para iniciar el flujo de OAuth.

```typescript
// En tu componente de inicio de sesión
'use client'
import { createClient } from '@/utils/supabase/client' // Ajusta la ruta

export default function OAuthSignIn() {
  const supabase = createClient()

  const handleGoogleSignIn = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: `${location.origin}/auth/callback`, // URL a la que redirigir después del login OAuth
      },
    })

    if (error) {
      console.error('Error signing in with Google:', error)
      // Manejar el error
    }
    // Si no hay error, la página se redirigirá al proveedor OAuth
  }

  return (
    <button onClick={handleGoogleSignIn}>
      Iniciar sesión con Google
    </button>
  )
}
```

4 **Manejar el Callback:** La URL `auth/callback` configurada en Google y Supabase es donde el proveedor OAuth redirigirá al usuario después de que se autentique. El SDK de Supabase Auth Helpers se encarga de procesar la respuesta.

Crea un Route Handler (`app/auth/callback/route.ts` si usas App Router) para manejar esto:

```typescript
// app/auth/callback/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')

  if (code) {
    const cookieStore = cookies()
    const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
    // Intercambia el código por una sesión de Supabase
    await supabase.auth.exchangeCodeForSession(code)
  }

  // URL a la que redirigir después de que Supabase procese el callback
  return NextResponse.redirect(requestUrl.origin + '/dashboard')
}
```

## La Importancia de un SMTP Personalizado: Control y Profesionalismo

Por defecto, Supabase usa su propio servicio de correo para enviar emails de autenticación (confirmación, OTP, reset de contraseña). Esto está bien para empezar, pero tiene limitaciones importantes:

1 **Límites de Envío:** El plan gratuito y a veces incluso los planes de pago tienen límites de envío por hora/día, lo que puede ser problemático a medida que creces.
2 **Entregabilidad:** Los emails enviados desde direcciones compartidas o dominios genéricos de Supabase son más propensos a terminar en la carpeta de spam.
3 **Branding:** Los emails vienen de una dirección genérica (ej: `no-reply@supabase.io`) y no puedes personalizarlos completamente para que reflejen tu marca.
4 **Visibilidad:** Tienes poca visibilidad sobre si los emails fueron entregados, abiertos, rebotaron, etc.

Configurar tu propio SMTP te da **control total**, mejora drásticamente la **entregabilidad** (¡adiós, spam!), refuerza tu **marca** y te da **visibilidad** del proceso.

## Guía Detallada: Configurando Zoho Mail como Tu SMTP

Zoho Mail ofrece planes muy asequibles (incluso uno gratuito limitado) para usar tu propio dominio de correo. Es una excelente opción para SMTP transaccional. Los pasos generales para usar un servicio SMTP (Zoho, SendGrid, Mailgun, etc.) son similares.

Aquí nos centraremos en Zoho:

1 **Configura Zoho Mail para Tu Dominio:**
    * Si aún no lo tienes, configura Zoho Mail para usar con tu propio dominio (ej: `tudominio.com`). Esto implica verificar tu dominio añadiendo registros MX, TXT (SPF, DKIM) en los DNS de tu dominio (lo veremos en el siguiente artículo, ¡pero necesitas que esto esté listo primero!).
    * Una vez configurado, asegúrate de que puedes enviar y recibir emails con direcciones de tu dominio (ej: `no-reply@tudominio.com`).

2 **Obtén las Credenciales SMTP de Zoho:**
    * Inicia sesión en tu cuenta de Zoho Mail.
    * Ve a Configuración (`Settings`).
    * Busca la sección "Correo" (`Mail`) y luego "Cuentas de Correo" (`Mail Accounts`) o "SMTP" (`SMTP`).
    * Deberías encontrar la información del servidor SMTP saliente:
        * **Servidor SMTP:** `smtp.zoho.com`
        * **Puerto:** `465` (SSL) o `587` (TLS) - **Usa 465 con SSL.**
        * **Nombre de usuario:** Tu dirección de email completa de Zoho (ej: `no-reply@tudominio.com`)
        * **Contraseña:** La contraseña de tu cuenta de Zoho Mail (o una contraseña específica de aplicación si Zoho lo requiere/recomienda por seguridad).

3 **Configura Supabase para Usar Tu SMTP:**
    * Ve a tu panel de Supabase.
    * Navega a "Authentication" -> "Settings".
    * Busca la sección "SMTP Settings".
    * Activa "Enable custom SMTP".
    * Rellena los campos con las credenciales de Zoho:
        * `SMTP Host`: `smtp.zoho.com`
        * `SMTP Port`: `587`
        * `SMTP User`: Tu dirección de email de Zoho (`no-reply@tudominio.com`)
        * `SMTP Pass`: La contraseña de tu cuenta de Zoho.
        * `SMTP Sender Name`: El nombre que quieres que aparezca (ej: "Tu SaaS Name").
        * `SMTP Sender Email`: Tu dirección de email de Zoho (`no-reply@tudominio.com`) **Debe coincidir con el SMTP User.**
    * Asegúrate de que "Use SSL" esté activado (para el puerto 465).
    * Guarda los cambios.

4 **Prueba la Configuración:** Supabase te permite enviar un email de prueba desde la misma página de configuración SMTP. Úsalo para verificar que todo funciona correctamente. Revisa la bandeja de entrada (¡y la de spam!) del destinatario del email de prueba.

¡Listo! Ahora Supabase usará tu cuenta de Zoho para enviar todos los emails de autenticación. Esto no solo mejora la entregabilidad, sino que te permite usar direcciones de email que refuercen tu marca.

## Consideraciones de Seguridad y Manejo de Errores

* **Variables de Entorno:** Nunca hardcodees tus credenciales de Supabase o SMTP en tu código. Usa variables de entorno (`.env.local` para desarrollo, la configuración de tu proveedor de *hosting* como Vercel para producción).
* **Validación:** Valida siempre las entradas del usuario (emails, contraseñas si las usas) en el cliente y en el servidor.
* **Manejo de Errores:** Implementa manejo de errores robusto en tus llamadas a Supabase y proporciona feedback claro al usuario.
* **Tasas de Envío:** Aunque uses tu propio SMTP, los proveedores tienen límites o políticas de uso justo. Monitorea tus envíos y considera usar un servicio dedicado de email transaccional (como Resend, que veremos en otro artículo) si tus volúmenes son muy altos.
* **Protección de Rutas:** Usa `auth-helpers-nextjs` para proteger rutas y componentes en el servidor, asegurando que solo los usuarios autenticados puedan acceder a contenido sensible.

```typescript
// Ejemplo: Proteger una ruta en App Router
// app/dashboard/page.tsx
import { createClient } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

export default async function Dashboard() {
  const supabase = createClient()

  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    // Redirigir al usuario no autenticado
    redirect('/login')
  }

  // Tu contenido de dashboard aquí
  return (
    <div>
      <h1>Bienvenido al Dashboard, {user.email}</h1>
      {/* ... contenido privado .. */}
    </div>
  )
}
```

Implementar una autenticación segura y fiable es un pilar fundamental de cualquier aplicación web o SaaS exitoso. Supabase simplifica enormemente este proceso al encargarse de la lógica del *backend*. Combinarlo con métodos modernos como Email OTP y Google OAuth ofrece flexibilidad y conveniencia a tus usuarios.

Pero el verdadero *boost* para la fiabilidad y el profesionalismo viene al tomar el control de tus emails transaccionales mediante un SMTP personalizado. Siguiendo esta guía, has aprendido a configurar Supabase para usar tu propio servicio (como Zoho), asegurando que tus emails lleguen a la bandeja de entrada y refuercen tu marca.

¡Ya has construido una base de autenticación mucho más robusta para tu proyecto! En próximos artículos, exploraremos otros aspectos esenciales para lanzar y escalar tu SaaS.

¿Qué otros desafíos de autenticación has enfrentado? ¡Déjanos un comentario!

Guía completa para implementar autenticación segura y personalizable en tu SaaS usando Supabase, incluyendo Email OTP, Google OAuth y configuración de SMTP propio para mejorar la entregabilidad.

Autenticación con Supabase Email OTP, Google y SMTP


 ¡vamos a crear tu primera migración de Supabase usando la CLI para definir tus tablas! Este es el flujo de trabajo recomendado para gestionar cambios en el esquema de tu base de datos de forma controlada y versionada.

Aquí tienes los pasos detallados:

## Pre-requisitos:

1 **Tener Supabase CLI instalado:** Si aún no lo tienes, instálalo siguiendo las instrucciones oficiales para tu sistema operativo: [https://supabase.com/docs/guides/cli/getting-started](https://supabase.com/docs/guides/cli/getting-started) (Las opciones comunes son Homebrew para macOS/Linux, Scoop para Windows, o npm).
2 **Tener un proyecto Supabase creado:** Necesitas un proyecto activo en [supabase.com](https://supabase.com/).
3 **Docker Desktop (Recomendado):** Para probar las migraciones localmente antes de aplicarlas a tu proyecto real, necesitarás Docker funcionando.

## Pasos para crear tu primera migración:

1 **Inicia sesión en la CLI de Supabase (si no lo has hecho):**
    Abre tu terminal y ejecuta:
    ```bash
    supabase login
    ```
    Esto te pedirá que generes un token de acceso en la web de Supabase y lo pegues en la terminal.

2 **Navega a la carpeta de tu proyecto local:**
    Ve al directorio raíz donde quieres manejar tu configuración de Supabase.
    ```bash
    cd /ruta/a/tu/proyecto
    ```

3 **Inicializa Supabase en tu proyecto local (si es la primera vez):**
    Si no tienes una carpeta `supabase` en tu proyecto, ejecútalo. Si ya la tienes, puedes omitir este paso.
    ```bash
    supabase init
    ```
    Esto creará una carpeta `supabase` con archivos de configuración.

4 **Vincula tu proyecto local con tu proyecto remoto en Supabase:**
    Necesitas el `Project Ref` (Referencia del Proyecto) de tu proyecto en Supabase. Lo encuentras en la configuración general de tu proyecto en el dashboard de Supabase (`https://app.supabase.com/project/<tu-project-ref>/settings/general`).
    Ejecuta el siguiente comando reemplazando `<tu-project-ref>`:
    ```bash
    supabase link --project-ref <tu-project-ref>
    ```
    Te pedirá la contraseña de tu base de datos (la que estableciste al crear el proyecto).

5 **Crea un nuevo archivo de migración:**
    Ahora vas a generar el archivo SQL donde definirás tus tablas. Dale un nombre descriptivo. Por ejemplo, si vas a crear las tablas iniciales:
    ```bash
    supabase migration new crear_tablas_iniciales
    ```
    * Esto creará un nuevo archivo SQL dentro de la carpeta `supabase/migrations`. El nombre del archivo tendrá un prefijo de timestamp para asegurar el orden de ejecución, algo como: `supabase/migrations/YYYYMMDDHHMMSS_crear_tablas_iniciales.sql`.

6 **Edita el archivo de migración SQL:**
    * Abre el archivo SQL que se acaba de crear (ej: `supabase/migrations/YYYYMMDDHHMMSS_crear_tablas_iniciales.sql`) con tu editor de código preferido.
    * Escribe el código SQL para crear tus tablas. Aquí tienes un ejemplo simple para crear dos tablas, `profiles` y `posts`, con una relación:

    ```sql
    -- Crear la tabla de perfiles de usuario
    CREATE TABLE profiles (
      id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, -- Vinculada a la tabla de autenticación de Supabase
      username TEXT UNIQUE NOT NULL,
      full_name TEXT,
      avatar_url TEXT,
      updated_at TIMESTAMPTZ DEFAULT timezone('utc'::text, now()) NOT NULL
    );

    -- Habilitar Row Level Security (RLS) - ¡Buena práctica!
    ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

    -- Crear políticas de RLS (ejemplos básicos)
    CREATE POLICY "Los perfiles son visibles públicamente." ON profiles
      FOR SELECT USING (true);

    CREATE POLICY "Los usuarios pueden insertar su propio perfil." ON profiles
      FOR INSERT WITH CHECK (auth.uid() = id);

    CREATE POLICY "Los usuarios pueden actualizar su propio perfil." ON profiles
      FOR UPDATE USING (auth.uid() = id);


    -- Crear la tabla de posts
    CREATE TABLE posts (
      id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
      user_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL, -- Clave foránea a profiles
      title TEXT NOT NULL,
      content TEXT,
      created_at TIMESTAMPTZ DEFAULT timezone('utc'::text, now()) NOT NULL
    );

    -- Habilitar Row Level Security (RLS)
    ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

    -- Crear políticas de RLS para posts (ejemplos básicos)
    CREATE POLICY "Los posts son visibles públicamente." ON posts
      FOR SELECT USING (true);

    CREATE POLICY "Los usuarios pueden crear posts." ON posts
      FOR INSERT WITH CHECK (auth.uid() = user_id);

    CREATE POLICY "Los usuarios pueden actualizar sus propios posts." ON posts
      FOR UPDATE USING (auth.uid() = user_id);

    CREATE POLICY "Los usuarios pueden borrar sus propios posts." ON posts
      FOR DELETE USING (auth.uid() = user_id);
    ```
    * **Importante:** Asegúrate de que tu SQL sea válido para PostgreSQL. Incluye `CREATE TABLE`, define columnas, tipos de datos, claves primarias (`PRIMARY KEY`), claves foráneas (`REFERENCES`), restricciones (`NOT NULL`, `UNIQUE`, `DEFAULT`), etc. Es muy recomendable habilitar Row Level Security (RLS) y definir políticas básicas desde el principio.

7 **(Opcional pero Muy Recomendado) Prueba la migración localmente:**
    * Asegúrate de que Docker Desktop esté corriendo.
    * Inicia el entorno local de Supabase:
        ```bash
        supabase start
        ```
        Esto descargará imágenes de Docker y levantará una instancia local de Supabase (base de datos, API, etc.).
    * Aplica las migraciones pendientes a tu base de datos local:
        ```bash
        supabase migration up
        ```
        Verifica si hay errores en la terminal. Si todo va bien, tu base de datos *local* ahora tendrá las tablas definidas en la migración.
    * Puedes conectarte a la base de datos local usando los datos que muestra `supabase start` para verificar las tablas manualmente.
    * Cuando termines de probar localmente, puedes detener el entorno:
        ```bash
        supabase stop
        ```

8 **Aplica la migración a tu proyecto Supabase remoto (producción/staging):**
    Una vez que estés seguro de que tu archivo SQL es correcto (idealmente después de probar localmente), aplica la migración a tu base de datos Supabase vinculada:
    ```bash
    supabase db push
    ```
    * Este comando revisará los archivos en tu carpeta `supabase/migrations` que aún no se han aplicado a la base de datos remota y los ejecutará en orden.
    * **¡Cuidado!** Este comando modifica directamente tu base de datos remota. Asegúrate de que la migración hace lo que esperas.

¡Listo! Después de ejecutar `supabase db push`, tus tablas deberían estar creadas en tu proyecto Supabase real. Puedes verificarlo en el "Table Editor" del dashboard de Supabase.

## Consejos Adicionales:

* **Control de Versiones (Git):** Guarda tu carpeta `supabase` (especialmente `supabase/migrations`) en tu repositorio Git. Esto te permite rastrear cambios, colaborar con otros y revertir si es necesario.
* **Orden de Migraciones:** La CLI ejecuta las migraciones en orden alfabético/cronológico basado en el timestamp del nombre del archivo.
* **Deshacer Migraciones (Localmente):** Para desarrollo local, si quieres deshacer la última migración aplicada, puedes usar `supabase migration down`. Para reiniciar completamente la base de datos local al estado inicial (perdiendo todos los datos locales), usa `supabase db reset`.
* **Estado de las Migraciones:** Puedes ver qué migraciones se han aplicado local y remotamente con `supabase status`.

Este proceso puede parecer un poco más complejo al principio que usar el editor de tablas en la interfaz web, pero te da un control mucho mayor, reproducibilidad y es esencial para trabajar en equipo o gestionar entornos de desarrollo, staging y producción.

Tutorial detallado para crear y gestionar migraciones de esquema de base de datos utilizando la CLI de Supabase, incluyendo la configuración inicial, vinculación con proyectos remotos, y aplicación de cambios.

Cómo Hacer una Migración en Supabase

Guía paso a paso para integrar Stripe en tu aplicación SaaS, desde la creación de la cuenta hasta la implementación de pagos recurrentes, suscripciones y webhooks.

Configuración Completa de Stripe para SaaS


10xDev incluye un potente sistema de temas basado en Tailwind CSS que permite personalizar completamente el aspecto visual de tu aplicación manteniendo la coherencia en todos sus componentes.

## Conceptos Básicos

Nuestro sistema de temas se basa en dos elementos principales:

1 **Temas de Color**: Paletas completas que definen colores para cada elemento de la interfaz.
2 **Variantes de Forma**: Controlan aspectos como los bordes redondeados de los componentes.

## Estructura del Sistema de Temas

El sistema utiliza variables CSS personalizadas (custom properties) que luego son consumidas por las clases de utilidad de Tailwind. Esto permite cambiar todo el aspecto de la aplicación simplemente cambiando el tema activo.

```css
/* Ejemplo de variables CSS de un tema */
:root[data-theme="tech-neon"] {
  --background: 220 50% 4%;
  --foreground: 140 15% 85%;
  --card: 220 40% 6%;
  --card-foreground: 140 18% 90%;
  --popover: 220 40% 6%;
  --popover-foreground: 140 18% 90%;
  --primary: 160 84% 39%;
  --primary-foreground: 220 50% 98%;
  --secondary: 220 25% 12%;
  --secondary-foreground: 140 15% 80%;
  --muted: 220 20% 10%;
  --muted-foreground: 140 10% 55%;
  --accent: 160 90% 40%;
  --accent-foreground: 220 50% 98%;
  --destructive: 0 80% 45%;
  --destructive-foreground: 220 50% 98%;
  --border: 220 20% 14%;
  --input: 220 25% 12%;
  --ring: 150 80% 45%;
}
```

## Temas Disponibles

10xDev incluye más de 20 temas prediseñados, desde temas corporativos profesionales hasta temas creativos y llamativos. Algunos ejemplos incluyen:

- **Tech Neon**: Un tema oscuro con acentos de neón para aplicaciones tech.
- **Corporate Classic**: Un tema claro y profesional para aplicaciones empresariales.
- **Ocean City**: Un tema con tonos azules profundos para aplicaciones sofisticadas.
- **Crimson Elite**: Un tema con tonos rojos intensos para aplicaciones de impacto.

## Cómo Aplicar un Tema

Puedes aplicar un tema de dos formas:

### 1 Mediante atributos HTML

La forma más sencilla es cambiar el atributo `data-theme` en el elemento HTML:

```tsx
// Aplicar un tema a toda la aplicación
document.documentElement.setAttribute('data-theme', 'tech-neon');

// Aplicar una variante
document.documentElement.setAttribute('data-variant', 'rounded');
```

### 2 Mediante el componente ThemeProvider

```tsx
import { ThemeProvider } from "@/components/theme/ThemeProvider";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider defaultTheme="tech-neon" defaultVariant="rounded">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
```

## Temas y Variantes en Acción

Aquí puedes ver cómo se ven algunos de nuestros temas y variantes:

### Temas

| Tema | Descripción |
|------|-------------|
| `deep-graphite` | Tonos oscuros y sobrios con acentos azules |
| `corporate-classic` | Tema profesional con paleta clara |
| `shadowed-navy` | Azules profundos con sombras elegantes |
| `emerald-vibes` | Verdes vibrantes sobre fondo oscuro |
| `obsidian-pro` | Negro intenso con acentos brillantes |
| `white-clean` | Minimalista, blanco y limpio |
| `cyberpunk-city` | Neones futuristas sobre negro |
| `pastel-pink` | Tonos rosas suaves y acogedores |

### Variantes de Bordes

| Variante | Descripción |
|----------|-------------|
| `zen` | Sin bordes redondeados, completamente cuadrado |
| `squared` | Bordes levemente redondeados |
| `semi-squared` | Bordes moderadamente redondeados |
| `rounded` | Bordes completamente redondeados |
| `bubble` | Bordes muy redondeados tipo burbuja |

## Personalización de Temas

Puedes crear tus propios temas personalizados extendiendo el archivo `theme.ts`:

```tsx
// Añadir un nuevo tema personalizado
const miTemaPersonalizado: ThemeType = {
  id: "mi-tema",
  variant: "Mi Tema Custom",
  background: "0 0% 100%",
  foreground: "222.2 84% 4.9%",
  card: "0 0% 100%",
  "card-foreground": "222.2 84% 4.9%",
  // ... resto de propiedades
};

export const themes = [...themesOriginales, miTemaPersonalizado];
```

## Integración con Tailwind

Nuestro sistema de temas está completamente integrado con Tailwind CSS, lo que significa que puedes usar las clases de utilidad normales y automáticamente respetarán el tema actual:

```tsx
<button className="bg-primary text-primary-foreground hover:bg-primary/90">
  Este botón se adaptará al tema activo
</button>
```

## Persistencia de Preferencias

El sistema incluye persistencia de las preferencias del usuario mediante `localStorage`, por lo que la selección de tema se conservará entre sesiones:

```tsx
import { useTheme } from "@/hooks/useTheme";

function ThemeSwitcher() {
  const { theme, setTheme, variant, setVariant } = useTheme();
  
  return (
    <div>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="tech-neon">Tech Neon</option>
        <option value="corporate-classic">Corporate Classic</option>
        {/* Más opciones */}
      </select>
    </div>
  );
}
```

## Modo Oscuro/Claro Automático

El sistema también puede detectar y adaptarse a las preferencias del sistema del usuario:

```tsx
import { useTheme } from "@/hooks/useTheme";

function App() {
  const { setTheme } = useTheme();
  
  useEffect(() => {
    // Detectar preferencia del sistema
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    setTheme(prefersDark ? 'tech-neon' : 'corporate-classic');
    
    // Actualizar si cambia la preferencia
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      setTheme(e.matches ? 'tech-neon' : 'corporate-classic');
    });
  }, [setTheme]);
  
  // Resto del componente
}
```

## Compatibilidad con Componentes

Todos los componentes de la librería UI y los bloques están diseñados para adaptarse automáticamente al tema activo, por lo que no necesitas ninguna configuración adicional.

## Siguientes Pasos

Para personalizar aún más el aspecto visual de tu aplicación, explora:

- [Personalización de Colores](/docs/themes/colors)
- [Variantes de Bordes](/docs/themes/radius)
- [Tipografía](/docs/themes/typography)

Con este sistema, puedes crear una experiencia visual única para tu aplicación manteniendo la coherencia y la calidad profesional en todos sus componentes. 

Cómo funciona el sistema de temas en 10xDev para personalizar completamente el aspecto visual de tu aplicación

Configuracion de Temas


¡Hola, 10x Developer!

Si estás construyendo una aplicación web o un SaaS, hay algo casi tan seguro como que necesitarás autenticación y base de datos: necesitarás enviar emails. Desde confirmaciones de cuenta y OTPs (¡hola, artículo anterior!) hasta notificaciones de actividad, recibos de pago o resets de contraseña, los emails transaccionales son el *pegamento* que mantiene a los usuarios conectados con tu producto.

El problema no es *cómo* enviar un email (eso es relativamente fácil con librerías o APIs), sino **cómo asegurar que ese email *llegue* a la bandeja de entrada del usuario y no se pierda en la temida carpeta de spam**. Una baja entregabilidad es frustrante para ti y tus usuarios, y da una imagen poco profesional.

Aunque podrías configurar tu propio servidor SMTP (como exploramos brevemente con Zoho para Supabase), un servicio dedicado como **Resend** está diseñado específicamente para la entregabilidad de emails transaccionales. Te ofrece una API limpia, herramientas de monitoreo y, lo más importante, te guía para configurar la infraestructura DNS necesaria para ser un remitente "de confianza".

En este artículo, vamos a configurar Resend paso a paso y, crucialmente, a entender los factores clave que aseguran que tus emails aterricen donde deben: en la bandeja de entrada.

## La Importancia Crítica de la Entregabilidad

Imagina esto: un nuevo usuario intenta registrarse en tu SaaS, recibe un email de verificación con un código OTP... que nunca llega. O peor, le llega horas después a la carpeta de spam. Resultado: un usuario frustrado que probablemente no volverá.

La entregabilidad no es un detalle menor; es una **característica fundamental** de tu producto. Depende de varios factores, incluyendo la reputación de tu dominio, la configuración técnica de tu email (registros DNS como SPF, DKIM, DMARC) y el contenido de tus mensajes.

## ¿Por Qué Resend?

Resend es un servicio relativamente nuevo pero que ha ganado popularidad rápidamente en la comunidad de desarrolladores por varias razones:

* **API Orientada a Desarrolladores:** Es limpia, moderna y fácil de usar.
* **Enfoque en Entregabilidad:** Está construido desde cero pensando en asegurar que tus emails lleguen.
* **Precios Razonables:** Competitivo, especialmente para volúmenes iniciales.
* **Templates:** Permite crear y gestionar templates de email fácilmente.
* **Estadísticas Claras:** Proporciona métricas sobre envíos, aperturas, clics, rebotes, etc.

Es una excelente alternativa a servicios más antiguos o más complejos si buscas simplicidad y efectividad.

## Paso a Paso: Crear una Cuenta en Resend y Verificar Tu Dominio

1 **Regístrate en Resend:** Ve a [Resend.com](https://resend.com/) y crea una cuenta. Tienen un plan gratuito generoso para empezar.
2 **Añade y Verifica Tu Dominio:** Este es el paso más crítico para la entregabilidad. Resend necesita confirmar que eres el propietario del dominio desde el que enviarás emails.
    * En el panel de Resend, ve a la sección "Domains".
    * Haz clic en "Add Domain".
    * Introduce tu dominio (ej: `tudominio.com`).
    * Resend te proporcionará varios **registros DNS** que necesitas añadir en el panel de tu gestor de DNS (¡hola, Cloudflare!). Serán registros de tipo `TXT` y `CNAME`.

3 **Configurando Registros DNS (en Cloudflare):** Vuelve a tu panel de Cloudflare (o donde gestiones tus DNS).
    * Ve a la sección DNS de tu dominio.
    * **Añade los Registros que te dio Resend.** Serán algo parecido a esto:
        * **Registro TXT (para verificación):**
            * Type: `TXT`
            * Name: `@` o `tudominio.com` (verifica lo que te pide Resend)
            * Content/Value: El código de verificación que te dio Resend (ej: `resend-verification=abcdef123456`)
        * **Registro TXT (para SPF):** SPF (`Sender Policy Framework`) indica a los servidores de correo receptores *qué servidores* están autorizados a enviar emails en nombre de tu dominio. Es VITAL.
            * Type: `TXT`
            * Name: `@` o `tudominio.com`
            * Content/Value: El registro SPF que te dio Resend. Si ya tienes uno (ej: para Zoho Mail), DEBES combinarlo. Un registro SPF típico de Resend se ve como `v=spf1 include:resend.com ~all`. Si ya tenías `v=spf1 include:zoho.com ~all`, el nuevo sería `v=spf1 include:resend.com include:zoho.com ~all` **Nunca tengas dos registros TXT separados con `v=spf1`.**
        * **Registros CNAME (para DKIM):** DKIM (`DomainKeys Identified Mail`) añade una firma digital a tus emails, permitiendo al receptor verificar que el email no ha sido alterado en tránsito y que proviene realmente del dominio. Resend te dará 1 o 2 registros CNAME para esto.
            * Type: `CNAME`
            * Name: Un subdominio proporcionado por Resend (ej: `resend.tudominio.com` o `rs._domainkey`)
            * Target: El hostname proporcionado por Resend (ej: `dkim.resend.com` o similar)
            * **Importante:** Para los registros CNAME de DKIM, asegúrate de que el Proxy de Cloudflare (la nube naranja) esté **DESACTIVADO** (estado `DNS Only`). Cloudflare recomienda no *proxyar* los registros de verificación de terceros.
        * **Registro TXT (para DMARC - Opcional pero Muy Recomendado):** DMARC (`Domain-based Message Authentication, Reporting & Conformance`) le dice al receptor qué hacer si los cheques de SPF o DKIM fallan y te permite recibir informes. Configurar DMARC correctamente requiere entender los otros dos. Un registro DMARC básico podría ser:
            * Type: `TXT`
            * Name: `_dmarc`
            * Content/Value: `v=DMARC1; p=none; rua=mailto:tudireccion@tudominio.com; ruf=mailto:tudireccion@tudominio.com; adkim=s; aspf=s` (Esto le dice al receptor que no haga nada si falla, pero que te envíe informes). Puedes cambiar `p=none` a `p=quarantine` o `p=reject` gradualmente una vez que estés seguro de que tus emails pasan SPF/DKIM.

4 **Verificar en Resend:** Una vez que hayas añadido los registros DNS, vuelve al panel de Resend y haz clic en "Verify Domain". La propagación de DNS puede tardar un poco (desde minutos hasta unas horas), así que ten paciencia. Verás el estado cambiar a "Verified" una vez que se detecten los registros.

¡Tu dominio ahora está configurado correctamente para enviar emails de forma autorizada a través de Resend! Este paso es fundamental para la entregabilidad.

## Enviando Tu Primer Email con la API de Resend en Next.js

Resend ofrece SDKs para varios lenguajes. Usaremos el de Node.js/TypeScript.

1 **Instala el SDK:**
    ```bash
    npm install resend
    # o
    yarn add resend
    ```
2 **Obtén Tu API Key:** En el panel de Resend, ve a "API Keys" y crea una nueva clave **Guarda esta clave de forma segura y úsala como una variable de entorno secreta.**
3 **Crea un Route Handler o API Route en Next.js:** Deberías enviar emails desde el lado del servidor para no exponer tu API key.

```typescript
// app/api/send-email/route.ts (usando App Router)
import { Resend } from 'resend';
import { NextResponse } from 'next/server';

const resend = new Resend(process.env.RESEND_API_KEY); // Usa tu variable de entorno

export async function POST(request: Request) {
  const { to, subject, body } = await request.json();

  if (!to || !subject || !body) {
    return NextResponse.json({ message: 'Missing required fields' }, { status: 400 });
  }

  try {
    const { data, error } = await resend.emails.send({
      from: 'Tu Nombre <no-reply@tudominio.com>', // ¡Debe ser una dirección de email verificada en Resend!
      to: to,
      subject: subject,
      html: body, // o text: body si es texto plano
    });

    if (error) {
      console.error('Error al enviar email:', error);
      return NextResponse.json({ error }, { status: 500 });
    }

    console.log('Email enviado con éxito:', data);
    return NextResponse.json({ data }, { status: 200 });

  } catch (error) {
    console.error('Error inesperado al enviar email:', error);
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}
```

Asegúrate de definir `RESEND_API_KEY` en tu archivo `.env.local` y en la configuración de variables de entorno de tu proveedor de hosting (Vercel, etc.). La dirección de email en el campo `from` (`no-reply@tudominio.com`) **debe** usar el dominio que verificaste en Resend.

## Manejo de Templates de Email

Enviar HTML directamente desde el código puede volverse complicado. Resend te permite crear y gestionar templates directamente en su panel o a través de su API.

* **Crear Template en Resend:** En el panel de Resend, ve a "Templates". Puedes crear plantillas usando su editor visual o importando HTML/React.
* **Enviar Email Usando Template:**

```typescript
// Ejemplo usando un template en Resend
import { Resend } from 'resend';
import { NextResponse } from 'next/server';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const { to, userName } = await request.json(); // Datos para el template

  try {
    const { data, error } = await resend.emails.send({
      from: 'Tu Producto <onboarding@tudominio.com>',
      to: to,
      subject: '¡Bienvenido a Tu Producto!',
      template: 'id_de_tu_template_en_resend', // Usa el ID de tu template
      // Puedes pasar variables al template así (depende del template)
      // variables: {
      //   name: userName,
      // },
    });

    // ... manejo de errores y respuesta
  } catch (error) {
    // ... manejo de errores
  }
}
```

Usar templates mejora la consistencia, facilita el diseño y separa la lógica de envío del contenido visual.

## Factores a Tener en Cuenta para la Entregabilidad (Más Allá de la Configuración)

Configurar SPF, DKIM y DMARC es esencial, pero la entregabilidad es un juego continuo. Considera lo siguiente:

* **Reputación del Remitente:** Se construye con el tiempo. Envía emails consistentemente, evita picos repentinos de volumen si tu dominio es nuevo, y asegúrate de que los usuarios interactúen positivamente con tus emails.
* **Calidad de la Lista de Email:** **NUNCA** compres listas de emails. Envía solo a usuarios que se hayan registrado voluntariamente y esperen tus comunicaciones. Las altas tasas de rebote o quejas de spam dañan seriamente tu reputación.
* **Contenido del Email:**
    * Evita *spam triggers*: Palabras excesivas en mayúsculas, signos de exclamación, jerga de marketing agresiva, enlaces acortados, etc.
    * Mantén un ratio texto/imagen equilibrado.
    * Asegúrate de que el HTML esté limpio y sea responsive.
* **Opción para Darse de Baja:** Incluye siempre un enlace de "darse de baja" claro y funcional en tus emails transaccionales (aunque no siempre es requerido legalmente para transaccionales puros, es buena práctica para ciertos tipos de notificaciones). Resend puede añadir esto automáticamente.
* **Monitoreo Constante:** Revisa el panel de Resend regularmente. Presta atención a las tasas de apertura, clics, rebotes (`bounces`) y quejas de spam (`complaints`). Una alta tasa de rebotes o quejas es una señal de alerta.
* **Autenticación en Dos Pasos (2FA):** Para los emails críticos (como OTPs o resets de contraseña), considera implementar 2FA en tu aplicación para una capa extra de seguridad.

## Manejo de Webhooks (Rebotes, Quejas)

Resend puede enviarte notificaciones automáticas (webhooks) cuando ocurre un evento importante, como un email que rebota (`bounce`) o un usuario que marca tu email como spam (`complaint`).

* **Configura Webhooks en Resend:** En el panel de Resend, ve a "Webhooks" y añade un nuevo *endpoint* (una URL en tu aplicación que recibirá las notificaciones, ej: `https://tudominio.com/api/webhooks/resend`).
* **Implementa el Endpoint en Next.js:** Crea un Route Handler que escuche peticiones POST en esa URL. Deberás verificar la firma del webhook para asegurarte de que proviene realmente de Resend.

```typescript
// app/api/webhooks/resend/route.ts (Ejemplo básico, necesitas verificar la firma)
import { NextResponse } from 'next/server';
import { headers } from 'next/headers';
// Importa la lógica de verificación de firma de webhook de Resend si su SDK la proporciona
// o implementa la verificación manual usando el secreto del webhook

export async function POST(req: Request) {
  const headersList = headers();
  const rawBody = await req.text(); // Necesitas el cuerpo crudo para verificar la firma
  const signature = headersList.get('Resend-Signature'); // Nombre del header puede variar, verifica docs de Resend

  // TODO: Implementar verificación de firma del webhook aquí usando tu secreto de webhook de Resend
  // if (!verifySignature(rawBody, signature, process.env.RESEND_WEBHOOK_SECRET)) {
  //   return NextResponse.json({ message: 'Invalid signature' }, { status: 400 });
  // }

  try {
    const event = JSON.parse(rawBody);
    console.log('Webhook de Resend recibido:', event);

    // Maneja diferentes tipos de eventos
    switch (event.type) {
      case 'email.bounced':
        console.log(`Email rebotado: ${event.data.email}`);
        // Marca el email como inválido en tu base de datos
        break;
      case 'email.complained':
        console.log(`Queja de spam: ${event.data.email}`);
        // Elimina al usuario de tus listas de correo
        break;
      case 'email.delivered':
        console.log(`Email entregado: ${event.data.email}`);
        // Opcional: registra la entrega
        break;
      // Otros tipos de eventos: email.opened, email.clicked, etc.
    }

    return NextResponse.json({ message: 'Webhook received' }, { status: 200 });

  } catch (error) {
    console.error('Error processing webhook:', error);
    return NextResponse.json({ message: 'Error processing webhook' }, { status: 500 });
  }
}

// TODO: Implementa la función de verificación de firma
// async function verifySignature(body: string, signature: string | null, secret: string | undefined): Promise<boolean> {
//   // Lógica de verificación usando crypto y el secreto proporcionado por Resend al crear el webhook
//   return true; // Placeholder
// }
```

Manejar rebotes y quejas te ayuda a mantener limpia tu lista de emails y protege tu reputación como remitente.

## Monitoreo y Análisis de Métricas

El panel de Resend te proporciona estadísticas valiosas. Revisa las tasas de entrega, apertura, clics, rebotes y quejas. Estas métricas son tus ojos sobre el rendimiento de tus emails y te alertan sobre posibles problemas de entregabilidad.

## Conclusión

El envío de emails transaccionales es más que solo apretar un botón; es un arte que requiere configuración técnica, buenas prácticas y monitoreo constante. Herramientas como Resend simplifican la parte técnica con una API amigable y te empujan a hacer lo correcto con la verificación del dominio.

Hemos recorrido la configuración esencial con Resend, desde añadir los registros DNS críticos (SPF, DKIM, DMARC) hasta enviar tu primer email con Next.js. Más importante aún, ahora entiendes los factores clave que determinan si tus emails llegan a la bandeja de entrada o terminan en la carpeta de spam.

Implementar estas prácticas no solo asegura que tus usuarios reciban tus comunicaciones vitales, sino que también construye la confianza y el profesionalismo de tu marca. ¡Envía con confianza!

¿Cuál es tu mayor dolor de cabeza con los emails transaccionales? ¡Cuéntanos en los comentarios!


Guía práctica y detallada para configurar y usar Resend para el envío de emails transaccionales en tu aplicación, con un enfoque especial en asegurar una alta entregabilidad y evitar la carpeta de spam.

Configurando Resend como un Pro (y Evitando Dolores de Cabeza)


¡Hola, tribu 10xDev!

Si estás construyendo una aplicación web o un SaaS, hay algo casi tan seguro como que necesitarás autenticación y base de datos: necesitarás enviar emails. Desde confirmaciones de cuenta y OTPs (¡hola, artículo anterior!) hasta notificaciones de actividad, recibos de pago o resets de contraseña, los emails transaccionales son el *pegamento* que mantiene a los usuarios conectados con tu producto.

El problema no es *cómo* enviar un email (eso es relativamente fácil con librerías o APIs), sino **cómo asegurar que ese email *llegue* a la bandeja de entrada del usuario y no se pierda en la temida carpeta de spam**. Una baja entregabilidad es frustrante para ti y tus usuarios, y da una imagen poco profesional.

Aunque podrías configurar tu propio servidor SMTP (como exploramos brevemente con Zoho para Supabase), un servicio dedicado como **Resend** está diseñado específicamente para la entregabilidad de emails transaccionales. Te ofrece una API limpia, herramientas de monitoreo y, lo más importante, te guía para configurar la infraestructura DNS necesaria para ser un remitente "de confianza".

En este artículo, vamos a configurar Resend paso a paso y, crucialmente, a entender los factores clave que aseguran que tus emails aterricen donde deben: en la bandeja de entrada.

## La Importancia Crítica de la Entregabilidad

Imagina esto: un nuevo usuario intenta registrarse en tu SaaS, recibe un email de verificación con un código OTP... que nunca llega. O peor, le llega horas después a la carpeta de spam. Resultado: un usuario frustrado que probablemente no volverá.

La entregabilidad no es un detalle menor; es una **característica fundamental** de tu producto. Depende de varios factores, incluyendo la reputación de tu dominio, la configuración técnica de tu email (registros DNS como SPF, DKIM, DMARC) y el contenido de tus mensajes.

## ¿Por Qué Resend?

Resend es un servicio relativamente nuevo pero que ha ganado popularidad rápidamente en la comunidad de desarrolladores por varias razones:

* **API Orientada a Desarrolladores:** Es limpia, moderna y fácil de usar.
* **Enfoque en Entregabilidad:** Está construido desde cero pensando en asegurar que tus emails lleguen.
* **Precios Razonables:** Competitivo, especialmente para volúmenes iniciales.
* **Templates:** Permite crear y gestionar templates de email fácilmente.
* **Estadísticas Claras:** Proporciona métricas sobre envíos, aperturas, clics, rebotes, etc.

Es una excelente alternativa a servicios más antiguos o más complejos si buscas simplicidad y efectividad.

## Paso a Paso: Crear una Cuenta en Resend y Verificar Tu Dominio

1 **Regístrate en Resend:** Ve a [Resend.com](https://resend.com/) y crea una cuenta. Tienen un plan gratuito generoso para empezar.
2 **Añade y Verifica Tu Dominio:** Este es el paso más crítico para la entregabilidad. Resend necesita confirmar que eres el propietario del dominio desde el que enviarás emails.
    * En el panel de Resend, ve a la sección "Domains".
    * Haz clic en "Add Domain".
    * Introduce tu dominio (ej: `tudominio.com`).
    * Resend te proporcionará varios **registros DNS** que necesitas añadir en el panel de tu gestor de DNS (¡hola, Cloudflare!). Serán registros de tipo `TXT` y `CNAME`.

3 **Configurando Registros DNS (en Cloudflare):** Vuelve a tu panel de Cloudflare (o donde gestiones tus DNS).
    * Ve a la sección DNS de tu dominio.
    * **Añade los Registros que te dio Resend.** Serán algo parecido a esto:
        * **Registro TXT (para verificación):**
            * Type: `TXT`
            * Name: `@` o `tudominio.com` (verifica lo que te pide Resend)
            * Content/Value: El código de verificación que te dio Resend (ej: `resend-verification=abcdef123456`)
        * **Registro TXT (para SPF):** SPF (`Sender Policy Framework`) indica a los servidores de correo receptores *qué servidores* están autorizados a enviar emails en nombre de tu dominio. Es VITAL.
            * Type: `TXT`
            * Name: `@` o `tudominio.com`
            * Content/Value: El registro SPF que te dio Resend. Si ya tienes uno (ej: para Zoho Mail), DEBES combinarlo. Un registro SPF típico de Resend se ve como `v=spf1 include:resend.com ~all`. Si ya tenías `v=spf1 include:zoho.com ~all`, el nuevo sería `v=spf1 include:resend.com include:zoho.com ~all` **Nunca tengas dos registros TXT separados con `v=spf1`.**
        * **Registros CNAME (para DKIM):** DKIM (`DomainKeys Identified Mail`) añade una firma digital a tus emails, permitiendo al receptor verificar que el email no ha sido alterado en tránsito y que proviene realmente del dominio. Resend te dará 1 o 2 registros CNAME para esto.
            * Type: `CNAME`
            * Name: Un subdominio proporcionado por Resend (ej: `resend.tudominio.com` o `rs._domainkey`)
            * Target: El hostname proporcionado por Resend (ej: `dkim.resend.com` o similar)
            * **Importante:** Para los registros CNAME de DKIM, asegúrate de que el Proxy de Cloudflare (la nube naranja) esté **DESACTIVADO** (estado `DNS Only`). Cloudflare recomienda no *proxyar* los registros de verificación de terceros.
        * **Registro TXT (para DMARC - Opcional pero Muy Recomendado):** DMARC (`Domain-based Message Authentication, Reporting & Conformance`) le dice al receptor qué hacer si los cheques de SPF o DKIM fallan y te permite recibir informes. Configurar DMARC correctamente requiere entender los otros dos. Un registro DMARC básico podría ser:
            * Type: `TXT`
            * Name: `_dmarc`
            * Content/Value: `v=DMARC1; p=none; rua=mailto:tudireccion@tudominio.com; ruf=mailto:tudireccion@tudominio.com; adkim=s; aspf=s` (Esto le dice al receptor que no haga nada si falla, pero que te envíe informes). Puedes cambiar `p=none` a `p=quarantine` o `p=reject` gradualmente una vez que estés seguro de que tus emails pasan SPF/DKIM.

4 **Verificar en Resend:** Una vez que hayas añadido los registros DNS, vuelve al panel de Resend y haz clic en "Verify Domain". La propagación de DNS puede tardar un poco (desde minutos hasta unas horas), así que ten paciencia. Verás el estado cambiar a "Verified" una vez que se detecten los registros.

¡Tu dominio ahora está configurado correctamente para enviar emails de forma autorizada a través de Resend! Este paso es fundamental para la entregabilidad.

## Enviando Tu Primer Email con la API de Resend en Next.js

Resend ofrece SDKs para varios lenguajes. Usaremos el de Node.js/TypeScript.

1 **Instala el SDK:**
    ```bash
    npm install resend
    # o
    yarn add resend
    ```
2 **Obtén Tu API Key:** En el panel de Resend, ve a "API Keys" y crea una nueva clave **Guarda esta clave de forma segura y úsala como una variable de entorno secreta.**
3 **Crea un Route Handler o API Route en Next.js:** Deberías enviar emails desde el lado del servidor para no exponer tu API key.

```typescript
// app/api/send-email/route.ts (usando App Router)
import { Resend } from 'resend';
import { NextResponse } from 'next/server';

const resend = new Resend(process.env.RESEND_API_KEY); // Usa tu variable de entorno

export async function POST(request: Request) {
  const { to, subject, body } = await request.json();

  if (!to || !subject || !body) {
    return NextResponse.json({ message: 'Missing required fields' }, { status: 400 });
  }

  try {
    const { data, error } = await resend.emails.send({
      from: 'Tu Nombre <no-reply@tudominio.com>', // ¡Debe ser una dirección de email verificada en Resend!
      to: to,
      subject: subject,
      html: body, // o text: body si es texto plano
    });

    if (error) {
      console.error('Error al enviar email:', error);
      return NextResponse.json({ error }, { status: 500 });
    }

    console.log('Email enviado con éxito:', data);
    return NextResponse.json({ data }, { status: 200 });

  } catch (error) {
    console.error('Error inesperado al enviar email:', error);
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}
```

Asegúrate de definir `RESEND_API_KEY` en tu archivo `.env.local` y en la configuración de variables de entorno de tu proveedor de hosting (Vercel, etc.). La dirección de email en el campo `from` (`no-reply@tudominio.com`) **debe** usar el dominio que verificaste en Resend.

## Manejo de Templates de Email

Enviar HTML directamente desde el código puede volverse complicado. Resend te permite crear y gestionar templates directamente en su panel o a través de su API.

* **Crear Template en Resend:** En el panel de Resend, ve a "Templates". Puedes crear plantillas usando su editor visual o importando HTML/React.
* **Enviar Email Usando Template:**

```typescript
// Ejemplo usando un template en Resend
import { Resend } from 'resend';
import { NextResponse } from 'next/server';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const { to, userName } = await request.json(); // Datos para el template

  try {
    const { data, error } = await resend.emails.send({
      from: 'Tu Producto <onboarding@tudominio.com>',
      to: to,
      subject: '¡Bienvenido a Tu Producto!',
      template: 'id_de_tu_template_en_resend', // Usa el ID de tu template
      // Puedes pasar variables al template así (depende del template)
      // variables: {
      //   name: userName,
      // },
    });

    // ... manejo de errores y respuesta
  } catch (error) {
    // ... manejo de errores
  }
}
```

Usar templates mejora la consistencia, facilita el diseño y separa la lógica de envío del contenido visual.

## Factores a Tener en Cuenta para la Entregabilidad (Más Allá de la Configuración)

Configurar SPF, DKIM y DMARC es esencial, pero la entregabilidad es un juego continuo. Considera lo siguiente:

* **Reputación del Remitente:** Se construye con el tiempo. Envía emails consistentemente, evita picos repentinos de volumen si tu dominio es nuevo, y asegúrate de que los usuarios interactúen positivamente con tus emails.
* **Calidad de la Lista de Email:** **NUNCA** compres listas de emails. Envía solo a usuarios que se hayan registrado voluntariamente y esperen tus comunicaciones. Las altas tasas de rebote o quejas de spam dañan seriamente tu reputación.
* **Contenido del Email:**
    * Evita *spam triggers*: Palabras excesivas en mayúsculas, signos de exclamación, jerga de marketing agresiva, enlaces acortados, etc.
    * Mantén un ratio texto/imagen equilibrado.
    * Asegúrate de que el HTML esté limpio y sea responsive.
* **Opción para Darse de Baja:** Incluye siempre un enlace de "darse de baja" claro y funcional en tus emails transaccionales (aunque no siempre es requerido legalmente para transaccionales puros, es buena práctica para ciertos tipos de notificaciones). Resend puede añadir esto automáticamente.
* **Monitoreo Constante:** Revisa el panel de Resend regularmente. Presta atención a las tasas de apertura, clics, rebotes (`bounces`) y quejas de spam (`complaints`). Una alta tasa de rebotes o quejas es una señal de alerta.
* **Autenticación en Dos Pasos (2FA):** Para los emails críticos (como OTPs o resets de contraseña), considera implementar 2FA en tu aplicación para una capa extra de seguridad.

## Manejo de Webhooks (Rebotes, Quejas)

Resend puede enviarte notificaciones automáticas (webhooks) cuando ocurre un evento importante, como un email que rebota (`bounce`) o un usuario que marca tu email como spam (`complaint`).

* **Configura Webhooks en Resend:** En el panel de Resend, ve a "Webhooks" y añade un nuevo *endpoint* (una URL en tu aplicación que recibirá las notificaciones, ej: `https://tudominio.com/api/webhooks/resend`).
* **Implementa el Endpoint en Next.js:** Crea un Route Handler que escuche peticiones POST en esa URL. Deberás verificar la firma del webhook para asegurarte de que proviene realmente de Resend.

```typescript
// app/api/webhooks/resend/route.ts (Ejemplo básico, necesitas verificar la firma)
import { NextResponse } from 'next/server';
import { headers } from 'next/headers';
// Importa la lógica de verificación de firma de webhook de Resend si su SDK la proporciona
// o implementa la verificación manual usando el secreto del webhook

export async function POST(req: Request) {
  const headersList = headers();
  const rawBody = await req.text(); // Necesitas el cuerpo crudo para verificar la firma
  const signature = headersList.get('Resend-Signature'); // Nombre del header puede variar, verifica docs de Resend

  // TODO: Implementar verificación de firma del webhook aquí usando tu secreto de webhook de Resend
  // if (!verifySignature(rawBody, signature, process.env.RESEND_WEBHOOK_SECRET)) {
  //   return NextResponse.json({ message: 'Invalid signature' }, { status: 400 });
  // }

  try {
    const event = JSON.parse(rawBody);
    console.log('Webhook de Resend recibido:', event);

    // Maneja diferentes tipos de eventos
    switch (event.type) {
      case 'email.bounced':
        console.log(`Email rebotado: ${event.data.email}`);
        // Marca el email como inválido en tu base de datos
        break;
      case 'email.complained':
        console.log(`Queja de spam: ${event.data.email}`);
        // Elimina al usuario de tus listas de correo
        break;
      case 'email.delivered':
        console.log(`Email entregado: ${event.data.email}`);
        // Opcional: registra la entrega
        break;
      // Otros tipos de eventos: email.opened, email.clicked, etc.
    }

    return NextResponse.json({ message: 'Webhook received' }, { status: 200 });

  } catch (error) {
    console.error('Error processing webhook:', error);
    return NextResponse.json({ message: 'Error processing webhook' }, { status: 500 });
  }
}

// TODO: Implementa la función de verificación de firma
// async function verifySignature(body: string, signature: string | null, secret: string | undefined): Promise<boolean> {
//   // Lógica de verificación usando crypto y el secreto proporcionado por Resend al crear el webhook
//   return true; // Placeholder
// }
```

Manejar rebotes y quejas te ayuda a mantener limpia tu lista de emails y protege tu reputación como remitente.

## Monitoreo y Análisis de Métricas

El panel de Resend te proporciona estadísticas valiosas. Revisa las tasas de entrega, apertura, clics, rebotes y quejas. Estas métricas son tus ojos sobre el rendimiento de tus emails y te alertan sobre posibles problemas de entregabilidad.

## Conclusión

El envío de emails transaccionales es más que solo apretar un botón; es un arte que requiere configuración técnica, buenas prácticas y monitoreo constante. Herramientas como Resend simplifican la parte técnica con una API amigable y te empujan a hacer lo correcto con la verificación del dominio.

Hemos recorrido la configuración esencial con Resend, desde añadir los registros DNS críticos (SPF, DKIM, DMARC) hasta enviar tu primer email con Next.js. Más importante aún, ahora entiendes los factores clave que determinan si tus emails llegan a la bandeja de entrada o terminan en la carpeta de spam.

Implementar estas prácticas no solo asegura que tus usuarios reciban tus comunicaciones vitales, sino que también construye la confianza y el profesionalismo de tu marca. ¡Envía con confianza!

¿Cuál es tu mayor dolor de cabeza con los emails transaccionales? ¡Cuéntanos en los comentarios!



<Card
  title="🐳 Next.js en Contenedores: Control y Escalabilidad Total"
  description="Despliega tu aplicación Next.js como los profesionales, optimizando para producción."
  icon="Anchor" 
>
  Cuando tu aplicación Next.js crece o tus requisitos de infraestructura se vuelven más complejos, los contenedores Docker y la orquestación con Kubernetes (K8s) ofrecen un nivel de control, portabilidad y escalabilidad superior. Esta guía te llevará paso a paso, desde un `Dockerfile` optimizado hasta configuraciones robustas en K8s. En 10xDev, entendemos que esta ruta es más exigente, ¡pero los beneficios para aplicaciones SaaS maduras son inmensos!
</Card>

## 📦 Dockerizando tu Aplicación Next.js

Containerizar tu aplicación es el primer paso. Un `Dockerfile` bien estructurado es crucial para tener imágenes ligeras, seguras y eficientes.

### El `Dockerfile` Optimizado para Producción

Este `Dockerfile` utiliza **multi-stage builds** para generar una imagen final mínima, aprovechando el [output `standalone` de Next.js](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-to-a-standalone-folder) para reducir drásticamente el tamaño.

```dockerfile
# Etapa 1: Instalación de dependencias (Development/Build Dependencies)
FROM node:18-alpine AS deps
# Alpine Linux es una base ligera. libc6-compat es para compatibilidad.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Usamos pnpm para una gestión eficiente de dependencias. Asegúrate de tener pnpm-lock.yaml.
# Si usas npm o yarn, ajusta esta sección.
COPY package.json pnpm-lock.yaml ./
# Instalamos pnpm globalmente en esta etapa para usarlo.
RUN npm install -g pnpm
RUN echo "Instalando dependencias con pnpm..."
RUN pnpm install --frozen-lockfile

# Etapa 2: Build de la aplicación Next.js
FROM node:18-alpine AS builder
WORKDIR /app
# Copiamos las dependencias instaladas de la etapa anterior.
COPY --from=deps /app/node_modules ./node_modules
# Copiamos el resto del código fuente.
COPY . .

# Variables de entorno necesarias durante el build (si las tienes).
# ARG NEXT_PUBLIC_API_URL
# ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL

# Ejecutamos el build de Next.js. Esto generará el output en .next.
RUN echo "Construyendo la aplicación Next.js..."
RUN npm run build

# Etapa 3: Imagen de Producción (Runner)
FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production

# Creamos un grupo y usuario dedicados para ejecutar la aplicación, mejorando la seguridad.
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# Copiamos solo los artefactos necesarios para producción desde la etapa 'builder'.
# Esto es posible gracias al output 'standalone' de Next.js.
COPY --from=builder /app/next.config.js ./next.config.js
COPY --from=builder /app/public ./public
# El directorio .next/standalone contiene tu aplicación y sus dependencias node_modules copiadas.
COPY --from=builder /app/.next/standalone ./
# Copiamos los assets estáticos generados por Next.js.
COPY --from=builder /app/.next/static ./.next/static

# Asignamos la propiedad de los archivos al usuario 'nextjs'.
RUN chown -R nextjs:nodejs /app
# Cambiamos al usuario no-root.
USER nextjs

EXPOSE 3000
# El puerto y hostname pueden ser sobrescritos por variables de entorno en K8s.
ENV PORT 3000
ENV HOSTNAME "0.0.0.0" # Escucha en todas las interfaces dentro del contenedor.

# El comando para iniciar la aplicación. server.js está dentro de la carpeta .next/standalone.
CMD ["node", "server.js"]
```

<Callout type="tip" title="¿Sabías que...?">
El uso de `pnpm` y el output `standalone` de Next.js son prácticas que recomendamos en 10xDev para optimizar tus contenedores. Nuestros **templates de Dockerfile** en 10xDev incorporan estas y otras optimizaciones.
</Callout>

### Puntos Clave de la Optimización del Contenedor:

- **Multi-stage builds:** Separan el entorno de build del de ejecución, resultando en imágenes finales mucho más pequeñas y seguras, ya que no contienen dependencias de desarrollo ni código fuente innecesario.
- **Base Alpine Linux:** `node:18-alpine` es una imagen base de Node.js muy ligera, lo que reduce el tamaño final de tu imagen Docker.
- **Usuario no root:** Ejecutar la aplicación con un usuario sin privilegios (`nextjs`) es una práctica de seguridad fundamental para minimizar el impacto de posibles vulnerabilidades.
- **Output `standalone` de Next.js:** Reduce drásticamente el tamaño de `node_modules` al incluir solo las dependencias estrictamente necesarias en la imagen final. Asegúrate de tener `output: &#39;standalone&#39;` en tu `next.config.js`.
- **Cache de Capas Docker:** Ordena los comandos en tu `Dockerfile` de menos a más cambiantes para aprovechar al máximo la caché de Docker y acelerar los builds.

## 🚀 Orquestando con Kubernetes (K8s)

Kubernetes te permite desplegar, escalar y gestionar tus aplicaciones containerizadas de forma automatizada y resiliente.

<Callout type="info" title="¿Por qué Kubernetes para Next.js?">
Mientras Docker empaqueta tu aplicación, Kubernetes se encarga de ejecutarla y mantenerla saludable a escala. Ofrece auto-reparación, escalado automático, gestión de configuraciones y secretos, y descubrimiento de servicios, esenciales para aplicaciones SaaS robustas.
</Callout>

### 1\. Deployment: Definiendo tu Aplicación

El `Deployment` se encarga de mantener el número deseado de réplicas (pods) de tu aplicación ejecutándose.

```yaml
# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nextjs-app-deployment # Nombre descriptivo
  labels:
    app: nextjs-app # Etiqueta para agrupar recursos
spec:
  replicas: 3 # Comienza con 3 instancias de tu aplicación
  selector:
    matchLabels:
      app: nextjs-app # Debe coincidir con las etiquetas del Pod
  template:
    metadata:
      labels:
        app: nextjs-app # Etiqueta aplicada a los Pods
    spec:
      containers:
      - name: nextjs-container # Nombre del contenedor dentro del Pod
        image: your-registry/your-nextjs-app:latest # ¡Reemplaza con tu imagen!
        ports:
        - containerPort: 3000 # Puerto que expone tu aplicación Next.js
        env: # Ejemplo de cómo pasar variables de entorno
        - name: NODE_ENV
          value: "production"
        # - name: DATABASE_URL
        #   valueFrom:
        #     secretKeyRef:
        #       name: my-app-secrets
        #       key: database_url
        resources: # Límites y solicitudes de recursos
          requests: # Recursos garantizados para el Pod
            memory: "128Mi" # Mínimo de memoria
            cpu: "100m"    # Mínimo de CPU (0.1 core)
          limits: # Máximo que puede consumir el Pod
            memory: "256Mi"
            cpu: "200m"
        readinessProbe: # Verifica si el Pod está listo para recibir tráfico
          httpGet:
            path: /api/health # Endpoint de healthcheck en tu app Next.js
            port: 3000
          initialDelaySeconds: 15 # Espera 15s antes de la primera verificación
          periodSeconds: 20    # Verifica cada 20s
        livenessProbe: # Verifica si el Pod está vivo; si falla, K8s lo reinicia
          httpGet:
            path: /api/health
            port: 3000
          initialDelaySeconds: 30
          periodSeconds: 20
```

**Nota:** Asegúrate de crear un endpoint `/api/health` en tu aplicación Next.js que devuelva un status `200 OK` cuando la app esté saludable.

### 2\. Service: Exponiendo tu Aplicación Internamente

Un `Service` proporciona una IP interna estable y un DNS para acceder a tus Pods.

```yaml
# service.yaml
apiVersion: v1
kind: Service
metadata:
  name: nextjs-app-service
spec:
  type: ClusterIP # Expone el servicio en una IP interna del cluster. Otras opciones: NodePort, LoadBalancer.
  ports:
  - port: 80 # Puerto del Service
    targetPort: 3000 # Puerto de los Pods (donde escucha Next.js)
    protocol: TCP
  selector:
    app: nextjs-app # Selecciona los Pods con esta etiqueta
```

### 3\. Ingress: Exponiendo tu Aplicación al Exterior

Un `Ingress` gestiona el acceso externo a los servicios HTTP/HTTPS, típicamente para routing basado en host o path y terminación SSL.

```yaml
# ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: nextjs-app-ingress
  annotations:
    # Estas anotaciones dependen de tu Ingress Controller (ej. Nginx, Traefik)
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
    # Para cert-manager (si lo usas para SSL automático):
    # cert-manager.io/cluster-issuer: "letsencrypt-prod"
spec:
  rules:
  - host: "app.your-domain.com" # ¡Reemplaza con tu dominio!
    http:
      paths:
      - path: / # Ruta base
        pathType: Prefix # Tipos: Prefix, Exact, ImplementationSpecific
        backend:
          service:
            name: nextjs-app-service # Nombre del Service creado antes
            port:
              number: 80 # Puerto del Service
  # tls: # Descomenta y configura si gestionas TLS aquí (o con cert-manager)
  # - hosts:
  #   - app.your-domain.com
  #   secretName: tls-secret-app # Nombre del Secret con tu certificado y clave
```

## 📈 Escalabilidad y Alta Disponibilidad

### Horizontal Pod Autoscaler (HPA)

El HPA escala automáticamente el número de Pods en tu `Deployment` basado en métricas como el uso de CPU o memoria.

```yaml
# hpa.yaml
apiVersion: autoscaling/v2 # o v2beta2 según tu versión de K8s
kind: HorizontalPodAutoscaler
metadata:
  name: nextjs-app-hpa
spec:
  scaleTargetRef: # Apunta al Deployment que quieres escalar
    apiVersion: apps/v1
    kind: Deployment
    name: nextjs-app-deployment
  minReplicas: 3 # Mínimo de Pods
  maxReplicas: 10 # Máximo de Pods
  metrics:
  - type: Resource
    resource:
      name: cpu
      target: # Tipo de objetivo, puede ser Utilization o AverageValue
        type: Utilization
        averageUtilization: 70 # Escala si el uso promedio de CPU supera el 70%
  # También puedes escalar por memoria:
  # - type: Resource
  #   resource:
  #     name: memory
  #     target:
  #       type: Utilization
  #       averageUtilization: 75
```

### Estrategias de Despliegue Avanzadas

Kubernetes soporta varias estrategias para actualizar tus aplicaciones:

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
<Card className="p-4">
<h3 className="text-lg font-semibold mb-2">🔄 Rolling Update (Por Defecto)</h3>
<p className="text-sm text-muted-foreground mb-2">Actualiza Pods gradualmente, uno por uno o en lotes, asegurando que la aplicación siga disponible. Configurable en el `Deployment`:</p>
```yaml	
spec:
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 25% # Cuántos Pods adicionales pueden crearse sobre el deseado
      maxUnavailable: 25% # Cuántos Pods pueden estar no disponibles durante la actualización
```
</Card>

<Card className="p-4">
<h3 className="text-lg font-semibold mb-2">🔵🟢 Blue-Green Deployment</h3>
<p className="text-sm text-muted-foreground mb-2">Despliegas una nueva versión ("green") junto a la actual ("blue"). El tráfico se redirige al "green" una vez está lista. Si hay problemas, se revierte rápidamente al "blue".</p>
<p className="text-xs text-muted-foreground">Esto se implementa usualmente manipulando las etiquetas del `Service` selector o a través de herramientas de Ingress más avanzadas o Service Mesh (ej. Istio, Linkerd).</p>
<Callout type="note" title="Implementación Blue-Green">
Una forma simple (pero manual) es tener dos Deployments (`nextjs-app-blue`, `nextjs-app-green`) y cambiar el selector del `Service` para apuntar a la nueva versión. Las herramientas de CI/CD pueden automatizar esto.
</Callout>
</Card>
</div>

## 📊 Monitorización y Logging Centralizado

### Prometheus y Grafana

Una combinación popular para la monitorización de métricas en Kubernetes.

- **Prometheus:** Recolecta métricas de tus aplicaciones y de K8s.
- **Grafana:** Visualiza estas métricas en dashboards personalizables.
- **Alertmanager:** Gestiona alertas basadas en las métricas de Prometheus.

Necesitarás un `ServiceMonitor` si usas el [invalid URL removed] para que Prometheus descubra tus Pods. Tu aplicación Next.js debería exponer un endpoint de métricas (ej. `/metrics`) en un formato compatible (ej. con `prom-client`).

```yaml
# servicemonitor.yaml (Ejemplo si usas Prometheus Operator)
apiVersion: [monitoring.coreos.com/v1](https://monitoring.coreos.com/v1)
kind: ServiceMonitor
metadata:
  name: nextjs-app-monitor
  labels:
    release: prometheus # O la etiqueta que use tu instalación de Prometheus
spec:
  selector:
    matchLabels:
      app: nextjs-app # Selecciona el Service de tu aplicación
  endpoints:
  - port: http # Nombre del puerto en tu Service (o especifica `targetPort` si es diferente)
    path: /metrics # Endpoint donde tu app expone las métricas
    interval: 15s # Frecuencia de scrapeo
```

### Logging Centralizado

Es crucial agregar y centralizar logs para análisis y troubleshooting.

<div className="my-4">
<Card className="p-4">
<h3 className="text-lg font-semibold mb-2">🪵 Stacks Populares de Logging:</h3>

- **EFK/ELK Stack:** Elasticsearch (almacenamiento), Fluentd/Fluent-bit o Logstash (recolección y procesamiento), Kibana (visualización).
- **Loki y Grafana:** Loki es un sistema de agregación de logs inspirado en Prometheus, fácil de integrar con Grafana.
- **Soluciones Cloud:** Como Google Cloud Logging, AWS CloudWatch Logs, Azure Monitor Logs.

<p className="text-xs text-muted-foreground mt-2">Configura tus Pods para que escriban logs a `stdout` y `stderr`, y un agente de logging (ej. Fluent-bit) los recolectará.</p>
</Card>
</div>

## 🔐 Mejores Prácticas de Seguridad en Contenedores y K8s

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
<Card className="p-4">
<h3 className="text-lg font-semibold mb-2">🔒 Seguridad del Contenedor</h3>

- **Escaneo de Vulnerabilidades:** Integra herramientas como Trivy, Snyk, o Clair en tu CI/CD para escanear imágenes Docker.
- **Minimizar Superficie de Ataque:** Usa imágenes base mínimas (como Alpine), instala solo paquetes necesarios, y elimina herramientas de build en la imagen final.
- **Gestión Segura de Secretos:** No incluyas secretos en imágenes Docker. Usa Kubernetes Secrets (montados como volúmenes o variables de entorno) y considera soluciones como HashiCorp Vault para gestión avanzada.
- **Actualizaciones Regulares:** Mantén actualizadas las imágenes base y las dependencias de tu aplicación.
</Card>

<Card className="p-4">
<h3 className="text-lg font-semibold mb-2">🛡️ Seguridad de Kubernetes</h3>

- **Network Policies:** Controla el tráfico de red entre Pods y hacia/desde fuera del clúster. Por defecto, todo el tráfico está permitido.
- **RBAC (Role-Based Access Control):** Configura permisos granulares para usuarios y service accounts, aplicando el principio de mínimo privilegio.
- **Pod Security Standards (PSS) / Pod Security Policies (PSP - deprecated):** Define políticas de seguridad a nivel de Pod (ej. restringir ejecución como root, uso de volúmenes hostPath). PSS es el sucesor de PSP.
- **Secrets Management:** Usa Kubernetes Secrets y considera cifrarlos en reposo (etcd encryption).
- **Auditoría de Logs:** Habilita y revisa los logs de auditoría del API Server de Kubernetes.
</Card>
</div>

## ⚙️ CI/CD para Despliegues Automatizados

Automatizar el build y despliegue de tus contenedores en Kubernetes es fundamental. Aquí un ejemplo con GitLab CI, adaptable a GitHub Actions, Jenkins, etc.

```yaml
# .gitlab-ci.yml (Ejemplo)
variables:
  IMAGE_TAG: $CI_REGISTRY_IMAGE/$CI_COMMIT_REF_SLUG:$CI_COMMIT_SHA
  # KUBE_CONTEXT: "your-user@your-cluster" # Configura esto en las variables de GitLab CI/CD

stages:
  - verify
  - build
  - deploy

lint_and_test:
  stage: verify
  image: node:18-alpine
  before_script:
    - apk add --no-cache libc6-compat
    - npm install -g pnpm
    - pnpm install --frozen-lockfile
  script:
    - pnpm lint
    - pnpm test

build_docker_image:
  stage: build
  image: docker:20.10.16 # Usa una imagen con Docker-in-Docker (dind) o socket binding
  services:
    - docker:20.10.16-dind
  before_script:
    # Login al registry de Docker (GitLab, Docker Hub, ECR, etc.)
    - echo $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER $CI_REGISTRY --password-stdin
  script:
    - docker build -t $IMAGE_TAG .
    - docker push $IMAGE_TAG
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # Solo en la rama principal

deploy_to_kubernetes:
  stage: deploy
  image:
    name: bitnami/kubectl:latest # Imagen con kubectl
    entrypoint: ['']
  # before_script:
    # - kubectl config use-context $KUBE_CONTEXT # Configura el contexto de K8s
  script:
    # Ejemplo: Actualiza la imagen del Deployment. Considera usar Helm o Kustomize para despliegues más complejos.
    - kubectl set image deployment/nextjs-app-deployment nextjs-container=$IMAGE_TAG --record
    # Opcional: verificar el rollout
    - kubectl rollout status deployment/nextjs-app-deployment
  environment:
    name: production
    url: [https://app.your-domain.com](https://app.your-domain.com) # URL de tu aplicación desplegada
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # Solo en la rama principal
```

<Callout type="tip" title="Mejora tus Despliegues con Herramientas">
Considera usar **Helm** o **Kustomize** para gestionar tus manifiestos de Kubernetes. Hacen que las configuraciones sean más reutilizables y manejables entre entornos. En 10xDev, exploramos cómo ofrecerte **templates de Helm charts** para acelerar esto.
</Callout>

<Callout type="warning" title="Consideraciones Finales Esenciales">
Desplegar y gestionar Kubernetes requiere atención al detalle:

- **Backups Consistentes:** No solo de tus datos, sino también de la configuración de tu clúster K8s (etcd).
- **Monitorización y Alertas Proactivas:** Fundamentales para detectar problemas antes de que impacten a los usuarios.
- **Documentación Exhaustiva:** Especialmente para procedimientos de emergencia y recuperación ante desastres.
- **Pruebas de Carga y Estrés:** Valida el rendimiento y la configuración de HPA antes de ir a producción.
- **Gestión de Costos:** Kubernetes puede ser costoso si no se optimizan los recursos. Monitoriza y ajusta `requests` y `limits`.

En 10xDev, estamos trabajando en guías y herramientas para simplificar estos aspectos complejos. ¡Tu feedback nos ayuda a priorizar!
</Callout>



Domina la containerización y orquestación de tu aplicación Next.js para un control, escalabilidad y resiliencia de nivel empresarial.

Despliegue Avanzado de Next.js con Contenedores Docker y Kubernetes


<Card
  title="🚀 Despliegue Serverless con Next.js"
  description="La ruta más rápida y eficiente para llevar tu aplicación a producción y escalar sin esfuerzo."
  icon="Zap"
>
  El despliegue serverless elimina la necesidad de gestionar servidores, permitiéndote enfocarte en construir tu aplicación Next.js. En esta guía, exploraremos cómo desplegar en plataformas líderes como Vercel (la opción recomendada por su integración nativa), Netlify y AWS Amplify. En 10xDev, creemos que un buen despliegue es la base del éxito, y nuestros **templates y boilerplates** están diseñados para brillar en entornos serverless.
</Card>

## ¿Por Qué Serverless para Next.js?

* **Escalado Automático:** Tu aplicación maneja picos de tráfico sin intervención manual.
* **Coste-Eficiencia:** Generalmente pagas solo por lo que usas, ideal para MVPs y startups.
* **Alta Disponibilidad:** Las plataformas serverless están diseñadas para ser resilientes.
* **Menor Mantenimiento:** Olvídate de actualizar el SO o parchear servidores.
* **Desarrollo Ágil (DX):** Especialmente con Vercel, la experiencia de desarrollo y despliegue es excepcional para Next.js.

## Plataformas Serverless Recomendadas

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
  <Card>
    <div className="p-6"> {/* Padding manejado por la Card o un div interno si es necesario para el diseño específico de Card */}
      <h3 className="text-xl font-semibold mb-2 flex items-center">
        <span className="text-2xl mr-2">⚡</span> Vercel
      </h3>
      <p className="text-sm text-muted-foreground mb-4">La plataforma de los creadores de Next.js. Optimización y DX insuperables. Ideal para cualquier proyecto Next.js.</p>
      <div className="flex flex-wrap gap-2">
        <Badge variant="secondary">Edge Network Global</Badge>
        <Badge variant="secondary">Next.js Analytics</Badge>
        <Badge variant="secondary">Previews Automáticas</Badge>
      </div>
    </div>
  </Card>

  <Card>
    <div className="p-6">
      <h3 className="text-xl font-semibold mb-2 flex items-center">
        <span className="text-2xl mr-2">🌐</span> Netlify
      </h3>
      <p className="text-sm text-muted-foreground mb-4">Excelente para sitios JAMstack y aplicaciones con funciones serverless. Robusta y con un gran ecosistema.</p>
      <div className="flex flex-wrap gap-2">
        <Badge variant="secondary">Netlify Functions</Badge>
        <Badge variant="secondary">Forms & Identity</Badge>
        <Badge variant="secondary">Deploy Previews</Badge>
      </div>
    </div>
  </Card>

  <Card>
    <div className="p-6">
      <h3 className="text-xl font-semibold mb-2 flex items-center">
        <span className="text-2xl mr-2">☁️</span> AWS Amplify
      </h3>
      <p className="text-sm text-muted-foreground mb-4">Ofrece una forma gestionada de desplegar aplicaciones full-stack en AWS, con gran flexibilidad y acceso a todo el ecosistema AWS.</p>
      <div className="flex flex-wrap gap-2">
        <Badge variant="secondary">AWS Lambda</Badge>
        <Badge variant="secondary">Amazon S3 & CloudFront</Badge>
        <Badge variant="secondary">GraphQL API (AppSync)</Badge>
      </div>
    </div>
  </Card>
</div>

## Despliegue en Vercel (Recomendado para Next.js)

Vercel ofrece la experiencia más fluida para desplegar aplicaciones Next.js.

### 1. Preparación de tu Proyecto

Asegúrate de que tu proyecto Next.js esté listo:

```bash
# Instala/actualiza dependencias (usa pnpm, npm o yarn según tu proyecto)
pnpm install

# Es buena práctica construir tu aplicación localmente para verificar que todo esté correcto
pnpm build
```

### 2\. Configuración de Vercel

1.  **Crea una cuenta en Vercel:** Visita [vercel.com](https://vercel.com) y regístrate (puedes usar tu cuenta de GitHub, GitLab o Bitbucket).
2.  **Importa tu Proyecto:**
      * Desde el dashboard de Vercel, haz clic en "Add New... \> Project".
      * Conecta tu repositorio Git (GitHub, GitLab, Bitbucket). Vercel detectará automáticamente que es un proyecto Next.js.
3.  **(Opcional) Instala Vercel CLI:** Para despliegues manuales o gestión desde la terminal.
    ```bash
    pnpm add -g vercel # o npm install -g vercel
    ```
    Luego, inicia sesión:
    ```bash
    vercel login
    ```

### 3\. Variables de Entorno

Gestiona tus secretos y configuraciones de forma segura:

<Callout type="tip" title="Configuración de Variables de Entorno en Vercel">

1.  En el dashboard de tu proyecto en Vercel, ve a **Settings \> Environment Variables**.
2.  Añade las variables que tengas en tu archivo local `.env.local` (¡recuerda que `.env.local` **no** se sube al repositorio\!).
3.  Puedes asignar variables a entornos específicos: Producción (Production), Previsualización (Preview) y Desarrollo (Development - para `vercel dev`).
    Nuestros **templates de 10xDev** suelen venir con un archivo `.env.example` para que sepas qué variables configurar.
</Callout>

### 4\. Despliegue

  * **Automático (Recomendado):** Vercel despliega automáticamente cada vez que haces `git push` a tu rama principal (ej. `main` o `master`) y crea despliegues de previsualización para cada `push` a otras ramas o Pull/Merge Requests.
  * **Manual (con Vercel CLI):**
    Navega a la raíz de tu proyecto en la terminal:
    ```bash
    # Para un despliegue de previsualización
    vercel

    # Para un despliegue a producción (asociado a tu rama de producción)
    vercel --prod
    ```

## Despliegue en Netlify

Netlify es otra excelente opción, especialmente si ya usas su ecosistema.

1.  **Preparación:** Similar a Vercel, asegúrate que tu proyecto compile correctamente.
2.  **Configuración en Netlify:**
      * Crea una cuenta en [netlify.com](https://netlify.com).
      * Importa tu proyecto desde tu proveedor Git. Netlify debería detectar que es Next.js.
      * Verifica los comandos de build (ej. `pnpm build` o `next build`) y el directorio de publicación (suele ser `.next` o `out` para exportaciones estáticas, pero para SSR/ISR con Next.js en Netlify, se usa el adaptador `@netlify/next-runtime`).
3.  **Adaptador de Next.js (si es necesario):** Para funcionalidades completas de Next.js (como SSR, ISR, API Routes), Netlify puede requerir el plugin `essential-nextjs-netlify` (anteriormente) o manejarlo automáticamente. Verifica su documentación más reciente.
    ```bash
    # A veces se instala automáticamente o se gestiona vía netlify.toml
    # pnpm add @netlify/plugin-nextjs
    ```
4.  **Variables de Entorno:** Configura en Netlify: **Site settings \> Build & deploy \> Environment**.
5.  **Despliegue:** Automático con `git push` o manual desde la UI de Netlify.

## Despliegue en AWS Amplify

Amplify simplifica el despliegue de Next.js en la infraestructura de AWS.

1.  **Preparación:** Tu proyecto Next.js.
2.  **Configuración en AWS Amplify Console:**
      * Accede a la [AWS Amplify Console](https://aws.amazon.com/amplify/console/).
      * Conecta tu repositorio Git. Amplify detectará tu framework Next.js.
      * Configura los ajustes de build (comando, directorio `.next`). Amplify gestiona la creación de Lambdas y CloudFront por ti.
3.  **Variables de Entorno:** En la Amplify Console: **Environment variables**.
4.  **Despliegue:** Automático con `git push`.

<Callout type="note" title="AWS Avanzado (Lambda + S3/CloudFront)">
Para un control más granular en AWS (fuera de Amplify), puedes usar AWS CDK, Serverless Framework, o configurar manualmente API Gateway, Lambda, S3 y CloudFront. Esta ruta es más compleja pero ofrece máxima personalización.
</Callout>

## Optimizaciones Serverless Recomendadas

Independientemente de la plataforma:

  * **Caché Inteligente y CDN:**
      * Implementa **Regeneración Estática Incremental (ISR)** para páginas con datos que cambian periódicamente pero no en tiempo real.
        ```javascript
        // ejemplo en una página de Next.js
        export async function getStaticProps() {
          // const data = await fetchSomeData();
          return {
            props: { /* data */ },
            revalidate: 60, // Regenera la página en background cada 60 segundos
          };
        }
        ```
      * Utiliza `<Image />` de `next/image` para optimización automática de imágenes y servicio a través de CDN.
      * Configura `headers` de caché personalizados en `next.config.js` para assets estáticos si necesitas control fino (aunque Vercel y Netlify suelen manejar esto bien por defecto).
        ```javascript
        // next.config.js
        module.exports = {
          async headers() {
            return [
              {
                source: '/static/:path*', // Ojo, Next.js sirve estáticos desde /_next/static
                headers: [
                  {
                    key: 'Cache-Control',
                    value: 'public, max-age=31536000, immutable',
                  },
                ],
              },
            ];
          },
        };
        ```
  * **Monitorización y Logging:**
      * Utiliza las herramientas de **analíticas integradas** (Vercel Analytics, Netlify Analytics) para Core Web Vitals y tráfico.
      * Implementa **logging estructurado** en tus API Routes o Server Components para facilitar el debugging. Envía logs a servicios de monitorización si es necesario (Sentry, Datadog, Logtail).
      * Configura **alertas** para:
          * Errores de build en tu plataforma de despliegue.
          * Fallos 5xx en tus funciones serverless o API routes.
          * Tiempos de respuesta elevados (si tu plataforma lo permite).

## Mejores Prácticas Generales

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
<Card>
<div className="p-6">
<h3 className="text-lg font-semibold mb-2">🔒 Seguridad</h3>
<ul className="list-disc pl-5 space-y-2 text-sm">
<li>Asegúrate que HTTPS esté forzado (generalmente por defecto en estas plataformas).</li>
<li>Configura Headers de Seguridad (CSP, HSTS, X-Frame-Options) en `next.config.js` o a través de la configuración de tu plataforma.</li>
<li>Implementa rate limiting en tus API routes si esperas alto tráfico o para prevenir abusos.</li>
<li>Gestiona los secretos **únicamente** a través de las variables de entorno de la plataforma.</li>
</ul>
</div>
</Card>

<Card>
<div className="p-6">
<h3 className="text-lg font-semibold mb-2">⚡ Rendimiento</h3>
<ul className="list-disc pl-5 space-y-2 text-sm">
<li>Analiza y optimiza el tamaño de tu bundle de JavaScript (usa `@next/bundle-analyzer`).</li>
<li>Implementa lazy loading para componentes e imágenes que no son visibles inicialmente.</li>
<li>Utiliza Edge Functions (Vercel Edge Functions, Netlify Edge Functions, Lambda@Edge) para lógica que necesita ejecutarse cerca del usuario (ej. A/B testing, geolocalización, auth).</li>
<li>Prioriza el renderizado estático (SSG) o ISR siempre que sea posible sobre SSR para mejor performance y coste.</li>
</ul>
</div>
</Card>
</div>

## Solución de Problemas Comunes

<Card className="my-6">
<div className="p-6">
<h3 className="text-lg font-semibold mb-3">🔍 Errores de Build Comunes</h3>
<p className="text-sm text-muted-foreground mb-2">Si tu build falla, verifica lo siguiente:</p>
<ul className="list-disc pl-5 space-y-1 text-sm">
<li>**Dependencias:** Asegúrate que todas las dependencias estén listadas correctamente en `package.json` y que el `lockfile` (pnpm-lock.yaml, package-lock.json, yarn.lock) esté actualizado y subido al repositorio.</li>
<li>**Variables de Entorno:** Confirma que todas las variables de entorno requeridas durante el build (NEXT_PUBLIC_* u otras) estén disponibles en el entorno de CI/CD de tu plataforma.</li>
<li>**Versiones de Node.js:** Asegúrate que la versión de Node.js en la plataforma sea compatible con tu proyecto (generalmente configurable en Vercel/Netlify).</li>
<li>**Errores de Código:** Revisa los logs de build detallados para identificar errores específicos de sintaxis, tipado (TypeScript) o lógica.</li>
</ul>
</div>
</Card>

<Card className="my-6">
<div className="p-6">
<h3 className="text-lg font-semibold mb-3">⚠️ Problemas de Rendimiento Post-Despliegue</h3>
<p className="text-sm text-muted-foreground mb-2">Si tu aplicación está lenta, considera:</p>
<ul className="list-disc pl-5 space-y-1 text-sm">
<li>**Imágenes sin Optimizar:** ¿Estás usando `<Image />` de `next/image` para todas las imágenes?</li>
<li>**Configuración de Caché:** Revisa las estrategias de caché (ISR, SSG, headers). ¿Hay contenido que podría ser estático o regenerado con menor frecuencia?</li>
<li>**Bundle Size Excesivo:** Analiza tu bundle. ¿Hay dependencias grandes que podrías reemplazar o cargar dinámicamente con `next/dynamic`?</li>
<li>**Llamadas a API Lentas:** Optimiza tus API routes o las APIs de terceros que consumes. Considera cachear respuestas de API.</li>
<li>**Edge Functions:** ¿Podría alguna lógica server-side moverse a Edge Functions para reducir latencia?</li>
</ul>
</div>
</Card>

<Callout type="info" title="Recursos Adicionales y Siguientes Pasos">

  - Visita la [se quitó una URL no válida].
  - Explora la [se quitó una URL no válida].
  - Consulta la [se quitó una URL no válida].
  - Revisa nuestras **plantillas y componentes UI en 10xDev** que están diseñados para ser altamente performantes y fáciles de desplegar en entornos serverless.
  - ¿Necesitas una configuración más avanzada? Consulta nuestra [se quitó una URL no válida].
</Callout>



Tu guía completa para desplegar aplicaciones Next.js en Vercel, Netlify y AWS Amplify, optimizando para velocidad y escalabilidad.

Despliegue Serverless Simplificado para Next.js


<Card
  title="Bienvenido a 10xDev"
  description="Tu plataforma todo en uno para desarrollo web profesional"
  icon="Zap"
>
  Descubre nuestra colección completa de herramientas, componentes y recursos
  diseñados para ayudarte a construir productos de calidad en tiempo récord.
</Card>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">
  <Card className="hover:border-primary/50">
  <a href="#" className="block">
      <h3 className="text-xl font-semibold mb-2 text-foreground">👨‍💻 Para Desarrolladores</h3>
      <span className="text-muted-foreground">Componentes TypeScript optimizados y boilerplates listos para producción.</span>
      </a>
  </Card>

<Card className="hover:border-primary/50">
  <a href="#" className="block">
    <h3 className="text-xl font-semibold mb-2 text-foreground">
      🚀 Para Fundadores
    </h3>
    <span className="text-muted-foreground">
      Lanza tu SaaS rápidamente con nuestros templates y guías validadas.
    </span>
  </a>
</Card>

<Card className="hover:border-primary/50">
<a href="#" className="block">
      <h3 className="text-xl font-semibold mb-2 text-foreground">🏢 Para Agencias</h3>
      <span className="text-muted-foreground">Optimiza tu flujo de trabajo y entrega proyectos más rápido.</span>
      </a>
</Card>
</div>

## Componentes y Herramientas

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
  <div className="space-y-4">
    <h3 className="text-xl font-semibold">🎨 UI y Diseño</h3>
    <Card className="hover:border-primary/50">
      <a href="/docs/blocks/introduction" className="block">
        <h4 className="font-medium text-foreground">Bloques UI</h4>
        <p className="text-sm text-muted-foreground">Componentes React optimizados y accesibles</p>
      </a>
    </Card>
    <Card className="hover:border-primary/50">
      <a href="/docs/themes/index" className="block">
        <h4 className="font-medium text-foreground">Sistema de Temas</h4>
        <p className="text-sm text-muted-foreground">Personalización visual completa</p>
      </a>
    </Card>
    <Card className="hover:border-primary/50">
      <a href="/docs/emails/overview" className="block">
        <h4 className="font-medium text-foreground">Templates de Email</h4>
        <p className="text-sm text-muted-foreground">Plantillas responsivas probadas</p>
      </a>
    </Card>
  </div>

  <div className="space-y-4">
    <h3 className="text-xl font-semibold">⚡ Backend y Despliegue</h3>
    <Card className="hover:border-primary/50">
      <a href="/docs/integrations/overview" className="block">
        <h4 className="font-medium text-foreground">Integraciones</h4>
        <p className="text-sm text-muted-foreground">Auth, DB, APIs y más</p>
      </a>
    </Card>
    <Card className="hover:border-primary/50">
      <a href="/docs/deployment/overview" className="block">
        <h4 className="font-medium text-foreground">Guías de Despliegue</h4>
        <p className="text-sm text-muted-foreground">Configura tu infraestructura</p>
      </a>
    </Card>
    <Card className="hover:border-primary/50">
      <a href="/docs/seo/competitor-analysis" className="block">
        <h4 className="font-medium text-foreground">SEO y Rendimiento</h4>
        <p className="text-sm text-muted-foreground">Optimiza tu aplicación</p>
      </a>
    </Card>
  </div>
</div>


Acelera tu desarrollo con herramientas profesionales y componentes optimizados

Documentación de 10xDev


¡Hola, equipo 10xDev!

Tienes una idea brillante. Has estado trabajando incansablemente en tu aplicación web o tu MVP de SaaS usando Next.js y el stack moderno que amas. El código está listo, las funcionalidades principales están pulidas... ¡pero ahora necesitas que el mundo lo vea!

Lanzar al público implica dar el paso crucial de poner tu código en un servidor accesible a través de internet. Esto, a menudo, comienza con algo fundamental: **tu propio dominio**. Luego viene la configuración técnica: los DNS, el *hosting*, la conexión entre ellos.

Para muchos, especialmente si es la primera vez, este proceso puede sentirse abrumador. ¿Dónde compro el dominio? ¿Qué son los DNS? ¿Cómo conecto todo?

Este artículo es tu guía completa para desmitificar el lanzamiento. Vamos a recorrer el camino desde la adquisición de tu dominio hasta tener tu aplicación Next.js corriendo en Vercel, gestionada eficientemente con Cloudflare. Utilizaremos herramientas populares y fiables, alineadas con un flujo de trabajo de desarrollo moderno y ágil.

¡Prepárate para llevar tu proyecto de la idea a estar *en el aire*!

## Paso 1: Comprar Tu Dominio en Namecheap

Elegir un buen registrador de dominios es importante. Queremos uno que sea fiable, tenga precios competitivos y una interfaz sencilla **Namecheap** es una opción muy popular y recomendada.

1 **Busca tu Dominio Ideal:** Ve a [Namecheap.com](https://www.namecheap.com/) y utiliza su barra de búsqueda para encontrar el dominio que deseas (ej: `tuincreiblesaas.com`).
2 **Explora Opciones:** Namecheap te mostrará si está disponible y sugerirá otras extensiones (.org, .net, .io, .app, etc.). Elige la que mejor se adapte a tu proyecto y audiencia.
3 **Añadir al Carrito y Comprar:** Una vez que encuentres el dominio perfecto, añádelo a tu carrito. Revisa los extras que te ofrecen (protección Whois, email, etc.). La protección Whois (`WhoisGuard`) suele ser gratuita de por vida en Namecheap y es muy recomendable para proteger tu información personal. Completa el proceso de compra.
4 **Verifica la Propiedad:** Namecheap te enviará un email para verificar que eres el propietario del email asociado a la cuenta. ¡No te saltes este paso! Es crucial para mantener el control de tu dominio.

¡Felicidades! Ya eres el orgulloso propietario de tu propio dominio.

## Paso 2: Transferir la Gestión de DNS a Cloudflare

Aunque Namecheap puede gestionar tus DNS, trasladar esta función a **Cloudflare** tiene enormes ventajas:

* **CDN Gratuita:** Acelera la carga de tu sitio almacenando copias en servidores de todo el mundo.
* **Seguridad:** Protección contra ataques DDoS básicos, certificado SSL gratuito y fácil de configurar.
* **Rendimiento:** Optimización de imágenes, minificación de código.
* **Gestión Sencilla:** Un panel de control de DNS potente e intuitivo.
* **Workers:** Funcionalidad serverless en el Edge (más avanzado).

¡Y muchas de estas funciones son gratuitas!

1 **Regístrate en Cloudflare:** Si aún no tienes una cuenta, ve a [Cloudflare.com](https://www.cloudflare.com/) y regístrate.
2 **Añade Tu Sitio:** Una vez dentro, haz clic en "Add Site" e introduce tu nuevo dominio.
3 **Selecciona el Plan:** Elige el plan "Free".
4 **Cloudflare Escanea Tus Registros DNS:** Cloudflare intentará importar automáticamente tus registros DNS existentes de Namecheap. Revisa que parezca correcto, aunque es probable que necesites ajustarlos más adelante.
5 **Cambia los Nameservers en Namecheap:** Este es el paso *clave*. Cloudflare te proporcionará dos Nameservers (ej: `adal.ns.cloudflare.com`, `penny.ns.cloudflare.com`).
    * Ve al panel de control de tu cuenta de Namecheap.
    * Busca la gestión de tu dominio recién comprado.
    * En la sección de "Nameservers", cambia la opción de "Namecheap BasicDNS" a "Custom DNS".
    * Introduce los dos Nameservers que te dio Cloudflare.
    * Guarda los cambios.

Este cambio puede tardar entre unos minutos y hasta 48 horas en propagarse por internet, aunque generalmente es mucho más rápido (una o dos horas). Tu dominio ahora está "apuntando" a Cloudflare para gestionar todas las solicitudes.

## Paso 3: Configurar Registros DNS Clave en Cloudflare

Ahora que Cloudflare es tu gestor de DNS, necesitas decirle dónde encontrar tu aplicación web. Esto se hace mediante la creación de **registros DNS**.

1 **Ve a la Sección DNS en Cloudflare:** En tu panel de Cloudflare, selecciona tu dominio y luego ve a la pestaña "DNS".
2 **Entiende los Registros Comunes:**
    * **A (Address):** Apunta un nombre de dominio (o subdominio) a una dirección IP (IPv4).
    * **CNAME (Canonical Name):** Apunta un nombre de dominio (o subdominio) a *otro nombre de dominio*. Esto es muy común para integrar servicios de hosting como Vercel.
    * **MX (Mail Exchanger):** Especifica los servidores de correo para tu dominio (necesario si usas Zoho Mail u otro servicio de email con tu dominio).
    * **TXT (Text):** Registros de texto para verificación (ej: para probar que eres dueño del dominio para servicios como Google o para registros SPF/DKIM de email).
3 **Configura los Registros para Vercel:** Vercel te dirá exactamente qué registros necesitas añadir. Generalmente, implican:
    * Un registro `A` o `AAAA` (si usas IPv6) para el dominio raíz (`@`) apuntando a la IP(s) de Vercel.
    * Un registro `CNAME` para `www` apuntando a `cname.vercel-dns.com`.

    *Ejemplo (verifica siempre la documentación actual de Vercel):*
    Haz clic en "Add record".
    * Type: `A`
    * Name: `@` (esto representa el dominio raíz, ej: `tudominio.com`)
    * IPv4 address: `76.76.21.21` (Esta es una IP genérica de Vercel, **verifica la IP actual en tu dashboard de Vercel**)
    * Proxy status: `Proxied` (esto activa la CDN y seguridad de Cloudflare, ¡déjalo así!)
    * TTL: `Auto`

    * Type: `CNAME`
    * Name: `www`
    * Target: `cname.vercel-dns.com` (**verifica este valor en tu dashboard de Vercel**)
    * Proxy status: `Proxied`
    * TTL: `Auto`

4 **Añade Otros Registros (Opcional pero Común):**
    * **Registros MX:** Si configuraste Zoho Mail (como vimos en el artículo anterior) o Google Workspace, deberás añadir los registros MX que te proporcionen.
    * **Registros TXT:** Lo mismo para registros SPF, DKIM o verificaciones de dominio para otros servicios.

## Paso 4: Preparando Tu Proyecto Next.js para el Despliegue

Asegúrate de que tu proyecto Next.js esté listo:

* **Control de Versiones:** Tu código debe estar en un repositorio Git (GitHub, GitLab, Bitbucket). Vercel se integra directamente con ellos.
* **Variables de Entorno:** Si usas variables de entorno (para claves de API, credenciales de base de datos, etc.), asegúrate de que estén definidas en tu `.env.local` (para desarrollo) y planifica cómo las configurarás en Vercel (ver siguiente paso).
* **Script de Build:** Vercel detectará automáticamente que es un proyecto Next.js, pero asegúrate de que tu `package.json` tenga un script `build` válido si has hecho personalizaciones.

## Paso 5: Despliegue en Vercel

**Vercel** es una plataforma de *hosting* optimizada para Next.js, ideal para desplegar aplicaciones web y SaaS de forma rápida y eficiente.

1 **Regístrate en Vercel:** Ve a [Vercel.com](https://vercel.com/) y regístrate (puedes usar tu cuenta de GitHub, GitLab o Bitbucket).
2 **Importa Tu Proyecto Git:** Una vez dentro, haz clic en "Add New..." -> "Project". Selecciona el repositorio Git de tu proyecto.
3 **Configura el Proyecto:** Vercel detectará que es un proyecto Next.js y preconfigurará la mayoría de los ajustes.
    * **Framework Preset:** Next.js.
    * **Root Directory:** Normalmente `.`.
    * **Build and Output Settings:** Generalmente no necesitas cambiar esto para Next.js.
    * **Environment Variables:** Aquí es donde añades las variables de entorno que tu aplicación necesita en producción (ej: `SUPABASE_URL`, `SUPABASE_SERVICE_KEY`, `GOOGLE_CLIENT_ID`, `GOOGLE_CLIENT_SECRET`, etc.) **Nunca añadas claves sensibles públicas aquí (las que empiezan con `NEXT_PUBLIC_` van en el código, las secretas van aquí).**
4 **Desplegar:** Haz clic en "Deploy". Vercel clonará tu repositorio, instalará dependencias, construirá tu proyecto y lo desplegará. ¡Verás un *build* en progreso!
5 **Despliegue Inicial Completo:** Una vez que termine, Vercel te dará una URL de previsualización (ej: `tu-proyecto-xxxx.vercel.app`). ¡Tu aplicación está en línea!

## Paso 6: Conectar Tu Dominio Personalizado en Vercel

Ahora que tu aplicación está desplegada y tu dominio está gestionado por Cloudflare, solo falta conectar ambos.

1 **Ve a la Configuración del Proyecto en Vercel:** En tu dashboard de Vercel, selecciona tu proyecto y ve a la pestaña "Settings" -> "Domains".
2 **Añade Tu Dominio:** Introduce tu dominio personalizado (ej: `tudominio.com`) y haz clic en "Add".
3 **Configura los Registros DNS (en Vercel):** Vercel te mostrará las instrucciones para configurar los registros DNS **Como ya transferimos la gestión de DNS a Cloudflare, *debes* seguir las instrucciones de Vercel y *aplicarlas en el panel de Cloudflare***.
    * Vercel detectará que estás usando Cloudflare y te dará los registros específicos que necesitas añadir o modificar en tu panel de Cloudflare (generalmente los registros `A` y `CNAME` para `www` que mencionamos antes).
    * Vuelve a tu panel de Cloudflare, sección DNS, y asegúrate de que los registros coinciden *exactamente* con lo que te pide Vercel. A veces, Vercel puede pedirte que configures un registro `A` para `@` apuntando a una IP específica de Vercel, y un `CNAME` para `www` apuntando a `cname.vercel-dns.com`.
    * **Verifica que el estado del Proxy (la nube naranja) esté ACTIVADO** en Cloudflare para esos registros, a menos que Vercel o una configuración específica te pida lo contrario (es raro).
4 **Verificación:** Vercel intentará verificar que los registros DNS se han configurado correctamente. Esto puede tardar unos minutos. Una vez verificado, tu dominio en Vercel mostrará un estado "Valid".

¡Listo! Ahora, cuando alguien visite `tudominio.com` (o `www.tudominio.com`), Cloudflare dirigirá la solicitud a Vercel, que servirá tu aplicación Next.js.

## Configuración de Subdominios para Diferentes Entornos

Es una práctica común tener diferentes versiones de tu aplicación para pruebas (staging) o desarrollo. Los subdominios son perfectos para esto (ej: `staging.tudominio.com`).

1 **Despliega Otra Versión en Vercel:** Puedes crear un nuevo proyecto en Vercel apuntando a una rama diferente de tu repositorio Git (ej: `staging`) o configurar entornos de previsualización automática para cada *pull request*.
2 **Añade el Subdominio en Vercel:** En la configuración del proyecto de Vercel, ve a "Settings" -> "Domains" y añade `staging.tudominio.com`. Vercel te pedirá que configures un registro DNS.
3 **Configura el Registro CNAME en Cloudflare:** Vercel te dirá el valor del `CNAME` para tu subdominio (generalmente `cname.vercel-dns.com`).
    * En tu panel de Cloudflare, sección DNS, añade un nuevo registro:
        * Type: `CNAME`
        * Name: `staging` (el nombre de tu subdominio)
        * Target: `cname.vercel-dns.com` (o el valor que te dé Vercel)
        * Proxy status: `Proxied`
        * TTL: `Auto`

Después de unos minutos de propagación, `staging.tudominio.com` apuntará a la versión de tu aplicación desplegada para staging en Vercel. Puedes repetir este proceso para `dev.tudominio.com`, `app.tudominio.com`, etc.

## Tips Extra para un Lanzamiento Exitoso

* **Configura Redirecciones en Cloudflare:** Puedes configurar reglas en Cloudflare para redirigir automáticamente `tudominio.com` a `www.tudominio.com` (o viceversa) para evitar contenido duplicado. Ve a "Rules" -> "Page Rules".
* **SSL Siempre Activo:** Con Cloudflare y Vercel, el certificado SSL (HTTPS) es gratuito y automático. Asegúrate de que esté configurado en "Full (strict)" en Cloudflare (sección SSL/TLS) si usas la proxy de Cloudflare. Vercel también gestiona SSL por sí mismo.
* **Optimiza con Cloudflare:** Explora las opciones de optimización en Cloudflare (Minify, Brotli, Rocket Loader) para mejorar aún más la velocidad de carga de tu sitio.
* **Monitorea el Tráfico:** Tanto Vercel como Cloudflare ofrecen paneles para ver el tráfico, *builds* y posibles errores.

## Conclusión

Lanzar tu aplicación web o SaaS no tiene por qué ser un misterio técnico. Siguiendo estos pasos, has aprendido a adquirir tu identidad en internet (el dominio), a dirigir el tráfico de manera eficiente y segura con Cloudflare, y a desplegar tu código con una plataforma optimizada como Vercel.

Tienes tu dominio comprado en Namecheap, tus DNS bajo el control poderoso de Cloudflare, y tu aplicación Next.js sirviéndose desde Vercel, accesible en tu propio dominio. ¡Eso es un logro enorme!

Este es el ciclo de vida de un proyecto: idear, construir y lanzar. Ya dominas el "lanzar" de forma profesional. ¡Ahora a seguir iterando y haciendo crecer tu producto!

¿Cuál fue tu mayor desafío al lanzar tu primer proyecto? ¡Compártelo en los comentarios!


Un tutorial paso a paso para emprendedores y desarrolladores sobre cómo adquirir un dominio, configurar DNS con Cloudflare y desplegar una aplicación Next.js en Vercel, conectando todos los servicios.

Elige tu Dominio y Lanzar Tu Web


<Card
  title="💡 Estrategia de Contenido Inteligente y Accionable con 10xDev"
  description="Define y ejecuta una estrategia de contenido que posicione tu marca, atraiga a tu público objetivo e impulse tus metas de negocio. Aprovecha los prompts de IA y las plantillas estructuradas de 10xDev."
  icon="FileOutput"
>
  Una estrategia de contenido SEO avanzada va más allá de simplemente escribir artículos. Implica una planificación meticulosa, creación de contenido de alto valor, optimización rigurosa y una distribución inteligente para atraer tráfico orgánico cualificado y guiarlo a través del funnel de conversión. Con 10xDev, puedes transformar tus ideas en contenido de alto impacto de manera eficiente.
</Card>

## Fundamentos de una Estrategia de Contenido Exitosa

Tu estrategia debe construirse sobre pilares sólidos para asegurar su efectividad a largo plazo.

### Pilares Esenciales del Contenido
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8"> {/* Grid justificado para comparar los 3 pilares */}
  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🎯 Relevancia</h3>
    <p className="text-sm text-muted-foreground mb-2">El contenido debe responder directamente a la **intención de búsqueda** del usuario.</p>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Alineado con keywords objetivo.</li>
      <li>Contextualizado para tu audiencia.</li>
      <li>Actual y preciso.</li>
      <li>Resuelve problemas o responde preguntas específicas.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">📝 Calidad (E-E-A-T)</h3>
    <p className="text-sm text-muted-foreground mb-2">El contenido debe ser excepcional y demostrar **Experiencia, Pericia, Autoridad y Fiabilidad**.</p>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Profundo y bien investigado.</li>
      <li>Original y único.</li>
      <li>Escrito por expertos o bien referenciado.</li>
      <li>Aporta valor real y tangible.</li>
      <li>Bien escrito y sin errores.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🔄 Consistencia</h3>
    <p className="text-sm text-muted-foreground mb-2">Publicar regularmente y mantener una voz y estilo coherentes construye confianza y audiencia.</p>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Frecuencia de publicación definida.</li>
      <li>Estilo de escritura y tono de voz unificados.</li>
      <li>Formatos de contenido consistentes.</li>
      <li>Identidad visual de marca coherente.</li>
    </ul>
  </Card>
</div>

## Planificación Estratégica de Contenido

Una planificación cuidadosa es la base de una estrategia de contenido que produce resultados.

### Creación de un Calendario Editorial Efectivo
Un calendario editorial es tu hoja de ruta. No se trata solo de fechas, sino de estrategia.
-   **Herramientas:** Usa Notion, Trello, Asana, Airtable, o incluso Google Sheets/Calendar.
-   **Componentes Clave:**
    -   **Tema/Título Provisional:** La idea central del contenido.
    -   **Keywords Principales/Secundarias:** Basadas en tu [investigación de keywords](/docs/seo/keywords).
    -   **Formato:** Artículo de blog, guía, estudio de caso, video, infografía, landing page.
    -   **Etapa del Funnel (TOFU, MOFU, BOFU):** Para asegurar una cobertura equilibrada.
    -   **Buyer Persona Objetivo:** ¿A quién te diriges?
    -   **Autor/Responsable:** Quién crea el contenido.
    -   **Fecha de Entrega Borrador / Fecha de Publicación.**
    -   **Estado:** Planificado, En Progreso, Revisión, Publicado.
    -   **Canales de Distribución:** Dónde se promocionará.
    -   **CTA Principal:** ¿Qué acción quieres que realice el usuario?
-   **Frecuencia y Ritmo:** Define una frecuencia de publicación realista y sostenible.
-   **Alineación con Objetivos:** Asegúrate que cada pieza de contenido contribuya a tus metas de negocio y SEO.

<Callout type="idea" title="Planificación Asistida por IA con 10xDev">
Usa los **prompts de IA de 10xDev** para:
- Generar ideas de temas para tu calendario basados en tus keywords y audiencia.
- Sugerir formatos de contenido adecuados para cada tema y etapa del funnel.
- Ayudarte a definir los ángulos y puntos clave para cada pieza de contenido.
</Callout>

### Definiendo la Estructura y Formato del Contenido
Tener plantillas o lineamientos claros para diferentes tipos de contenido asegura consistencia y calidad.
-   **Propósito del Contenido:** ¿Es para educar, persuadir, convertir, o entretener?
-   **Audiencia Específica:** Adapta el lenguaje, profundidad y formato.
-   **Flujo Lógico:** Introducción clara, desarrollo coherente, conclusión accionable.
-   **Elementos Visuales:** Uso de imágenes, videos, diagramas para mejorar la comprensión y el engagement.
    *Nuestras **plantillas de contenido en 10xDev** ofrecen estructuras probadas para artículos, guías y más, ahorrándote tiempo y esfuerzo.*

## Optimización SEO del Contenido (On-Page)

Cada pieza de contenido debe estar optimizada para los motores de búsqueda y para la experiencia del usuario.

### Principios Clave de SEO On-Page para Contenido:
-   **Integración Natural de Keywords:** Usa tu keyword principal en el título (H1), meta título, meta descripción, URL (si es posible), y de forma natural en los primeros párrafos. Integra keywords secundarias y LSI a lo largo del texto. ¡Evita el keyword stuffing!
-   **Títulos Atractivos (H1 y Meta Título):** Deben ser claros, concisos, incluir la keyword principal y generar curiosidad para el clic.
-   **Meta Descripciones Persuasivas:** Aunque no influyen directamente en el ranking, son cruciales para el CTR desde las SERPs. Deben resumir el contenido y tener un CTA implícito.
-   **Encabezados Semánticos (H2-H6):** Estructura tu contenido lógicamente para facilitar la lectura y ayudar a los motores de búsqueda a entender la jerarquía.
-   **Optimización de Imágenes:** Usa `next/image`, comprime imágenes, y escribe `alt text` descriptivos con keywords relevantes.
-   **Enlaces Internos:** Enlaza a otras páginas relevantes de tu sitio para mejorar la navegación, distribuir la autoridad de página (link equity) y ayudar a los usuarios a profundizar.
-   **Legibilidad:** Párrafos cortos, frases claras, listas, negritas para destacar ideas.
-   **Profundidad y Valor (E-E-A-T):** Asegúrate que tu contenido sea completo, responda exhaustivamente a la intención de búsqueda y demuestre tu Experiencia, Pericia, Autoridad y Fiabilidad.

<Callout type="tip" title="Referencia Cruzada">
Para una guía detallada sobre estos elementos, consulta nuestro artículo [Optimización SEO On-Page y Creación de Contenido](/docs/seo/content).
</Callout>

### Estructura Semántica y Tabla de Contenidos
-   **HTML Semántico:** Utiliza etiquetas HTML (`<article>`, `<section>`, `<nav>`, `<aside>`, etc.) apropiadamente para dar estructura y significado a tu contenido.
-   **Tabla de Contenidos (TOC):** Para contenido largo (guías, pillar pages), una TOC mejora la experiencia del usuario y puede generar "sitelinks" en las SERPs. Puedes generarla con librerías de Markdown o implementarla manualmente.
    *Los **templates de artículos y guías de 10xDev** a menudo incluyen o facilitan la creación de tablas de contenido.*

## Creación de Contenido de Alto Impacto: Tipos y Estructuras

Adapta la estructura de tu contenido al formato y al objetivo.

### 📝 Estructura Ideal de un Artículo de Blog (Ej. para SaaS TOFU/MOFU)
-   **Título Enganchador (H1):** Claro, con keyword principal, y que prometa valor.
-   **Introducción (Primeros 100-150 palabras):**
    -   Capta la atención inmediatamente.
    -   Presenta el tema y el problema/pregunta que se abordará.
    -   Incluye la keyword principal de forma natural.
    -   Indica brevemente qué aprenderá el lector.
-   **Cuerpo del Artículo (Dividido con H2, H3):**
    -   Desarrolla los puntos clave en secciones lógicas.
    -   Aporta valor real: insights, datos, ejemplos, consejos prácticos.
    -   Usa listas, imágenes (`next/image` optimizadas), citas, ejemplos de código si aplica.
    -   Integra keywords secundarias y LSI.
-   **Conclusión:**
    -   Resume los puntos más importantes.
    -   Ofrece una conclusión o takeaway claro.
    -   Incluye una Llamada a la Acción (CTA): comentar, compartir, leer otro artículo, probar una feature (si es relevante para la etapa del funnel).

### 📘 Estructura de Guía Detallada o Pillar Page
Cubre un tema amplio de forma exhaustiva, actuando como un hub central para un "topic cluster".
-   **Introducción Profunda:** Establece la importancia y el alcance del tema.
-   **Tabla de Contenidos Navegable.**
-   **Múltiples Capítulos/Secciones Principales (H2):** Cada uno cubriendo una faceta importante del tema pilar.
-   **Subsecciones Detalladas (H3, H4):** Con explicaciones, ejemplos, datos, y visuales.
-   **Enlaces Internos:** A los artículos específicos del cluster (contenido de apoyo) y externos a fuentes autorizadas.
-   **Conclusión Recapitulatoria:** Con un CTA principal fuerte (ej. descargar un recurso complementario, contactar).

### 📊 Estructura de Estudio de Caso (Ej. para SaaS BOFU)
Demuestra cómo tu producto/servicio ayudó a un cliente real.
-   **Resumen Ejecutivo:** Cliente, desafío, solución, resultados clave (cuantificables).
-   **Sobre el Cliente:** Breve perfil y contexto.
-   **El Desafío:** Problemas específicos que enfrentaba el cliente.
-   **La Solución:** Cómo tu producto/servicio fue implementado y utilizado. Destaca features clave.
-   **Los Resultados:** Beneficios tangibles obtenidos, con métricas y testimonios directos.
-   **Conclusión/CTA:** Resume el éxito e invita a prospectos similares a actuar.

### 🚀 Estructura de Landing Page Optimizada
Diseñada para una conversión específica.
-   **Titular Impactante (H1):** Claro, conciso, orientado al beneficio y con la keyword principal.
-   **Subtítulo Explicativo:** Expande el titular.
-   **Hero Shot/Video:** Visual convincente del producto o beneficio.
-   **Beneficios Clave (no solo features):** En listas o secciones fáciles de escanear.
-   **Prueba Social:** Testimonios cortos, logos, números (ej. "Más de 10,000 usuarios satisfechos").
-   **Llamada a la Acción (CTA) Clara y Visible:** Repetida si la página es larga.
-   **Mínima Fricción:** Sin navegación distractora, formulario simple (si aplica).
    *Nuestros **bloques de UI y templates de Landing Page en 10xDev** están diseñados para maximizar la conversión.*

## Distribución y Promoción del Contenido

Crear contenido es solo la mitad del trabajo; la otra mitad es asegurar que llegue a tu audiencia.

### Canales de Distribución Clave
-   **Redes Sociales:** Adapta y comparte en LinkedIn, Twitter, Facebook, etc., usando visuales y CTAs.
-   **Email Marketing / Newsletters:** Nutre a tu audiencia existente con contenido nuevo y relevante.
-   **Comunidades Online:** Comparte tu expertise (no solo spam de enlaces) en Reddit, foros, grupos de Slack/Discord.
-   **Guest Posting:** Escribe en blogs relevantes de tu industria para ganar visibilidad y backlinks.
-   **Link Building Interno Estratégico:** Enlaza tus piezas de contenido entre sí de forma lógica.
-   **Publicidad Pagada (Opcional):** Promociona contenido clave (especialmente MOFU/BOFU) para acelerar su alcance.
-   **Reutilización de Contenido (Content Repurposing):** Transforma un artículo en un video, infografía, carrusel de LinkedIn, o episodio de podcast.

## Medición del Éxito y Ajuste de la Estrategia

Mide el rendimiento de tu contenido para entender qué funciona y dónde mejorar.
-   **Tráfico Orgánico (GA4):** ¿Están tus piezas atrayendo visitantes de búsqueda?
-   **Rankings de Keywords (GSC, Ahrefs, SEMrush):** ¿Estás posicionando para tus keywords objetivo?
-   **Engagement del Usuario (GA4):** Tiempo en página, tasa de interacción, profundidad de scroll.
-   **Conversiones (GA4):** Leads, suscripciones, ventas atribuidas al contenido.
-   **Backlinks (Ahrefs, SEMrush, GSC):** ¿Está tu contenido atrayendo enlaces de calidad?
-   **Menciones y Compartidos Sociales.**

<Callout type="tip" title="Iteración Constante">
Usa estos datos para identificar qué temas resuenan más, qué formatos funcionan mejor y qué contenido necesita ser actualizado o mejorado. La estrategia de contenido es un ciclo de **planificar → crear → optimizar → distribuir → medir → iterar.**
</Callout>

<Callout type="idea" title="Crea y Adapta Contenido Multi-Formato con IA de 10xDev">
¡Maximiza el impacto de cada idea! Con los **prompts de IA de 10xDev**, puedes:
-   Generar esquemas detallados para artículos, guías o estudios de caso.
-   Adaptar un artículo de blog extenso en un script para un video corto y dinámico.
-   Extraer los puntos clave de una guía para crear una infografía visualmente atractiva.
-   Transformar un estudio de caso en una serie de posts persuasivos para LinkedIn.
-   Obtener borradores iniciales para landing pages enfocadas en la conversión.
Aprovecha la IA para diversificar tus formatos y reutilizar tu mejor contenido de manera eficiente, ahorrando tiempo y expandiendo tu alcance.
</Callout>

<Callout type="info" title="Próximos Pasos en tu Viaje SEO">
-   Domina la base: [SEO Técnico Avanzado en Next.js](/docs/seo/technical)
-   Encuentra tus palabras clave: [Investigación Estratégica de Palabras Clave](/docs/seo/keywords)
-   Mide y optimiza tus resultados: [Analítica Web y CRO en Next.js](/docs/seo/conversion)
</Callout>


Desarrolla un plan de contenidos que atraiga, convierta y fidelice, potenciado por las herramientas de IA y plantillas de 10xDev.

Estrategia de Contenido SEO Avanzada con 10xDev


## 1 Primeros Pasos

### Configuración del Entorno

- **Instalación rápida**: `pnpm install` para instalar dependencias
- **Desarrollo local**: `pnpm dev` para iniciar el servidor de desarrollo
- **Variables de entorno**: Configura `.env.local` con las credenciales
  necesarias:
  ```
  NEXT_PUBLIC_SUPABASE_URL=tu_url_de_supabase
  NEXT_PUBLIC_SUPABASE_ANON_KEY=tu_clave_anon
  ```

### Estructura del Proyecto

- **Arquitectura**: Next.js con Pages Router + TypeScript + Tailwind CSS
- **Componentes reutilizables**: `/src/components` contiene la librería UI base
- **Bloques prediseñados**: `/src/blocks` ofrece componentes completos listos
  para usar
- **Plantillas de email**: `/src/email-templates` contiene diseños responsive
  listos para implementar
- **Servicios**: Separación clara entre lógica cliente (`/services/client`) y
  servidor (`/services/server`)

## 2 Uso de Bloques UI

### Implementación Rápida

- Importa bloques completos desde `src/blocks` para implementar funcionalidades
  enteras:
  ```tsx
  import { Landing } from "@/blocks/landing/Landing";

  export default function MiPagina() {
    return <Landing />;
  }
  ```

### Personalización de Temas

- Usa los temas predefinidos modificando el atributo `data-theme` en el HTML:
  ```tsx
  // Cambiar tema programáticamente
  document.documentElement.setAttribute("data-theme", "tech-neon");
  ```
- Personaliza las variantes de bordes redondeados con `data-variant`

### Adaptación Responsiva

- Todos los componentes son 100% responsive
- Utiliza las clases Tailwind para ajustes específicos:
  ```tsx
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {/* Contenido responsivo */}
  </div>;
  ```

## 3 Optimización con IA

### Generación de Componentes

- Integra herramientas como GitHub Copilot o ChatGPT:
  ```bash
  # Ejemplo de prompt para Copilot
  # Crea un componente Card para mostrar productos con:
  # - Imagen destacada
  # - Título y descripción
  # - Precio y botón de compra
  # - Compatible con nuestro sistema de temas
  ```

### Análisis de Rendimiento

- Utiliza el comando `pnpm analyze` para identificar componentes pesados
- Implementa carga perezosa (lazy loading) con `dynamic` de Next.js:
  ```tsx
  import dynamic from "next/dynamic";

  const ComponentePesado = dynamic(
    () => import("@/components/ComponentePesado"),
    {
      loading: () => <p>Cargando...</p>,
    },
  );
  ```

### Automatización de Pruebas

- Genera casos de prueba automatizados con IA:
  ```bash
  # Prompt para generar tests
  # Crea tests para el componente AuthForm que verifiquen:
  # - Validación de campos
  # - Mensajes de error
  # - Proceso de login exitoso
  ```

## 4 Implementación de Email Templates

### Selección y Personalización

- Explora los templates disponibles en `src/email-templates`
- Personaliza cada plantilla modificando los props:
  ```tsx
  import { WelcomeEmail } from "@/email-templates/WelcomeEmail";

  // Personaliza la plantilla con tus datos
  <WelcomeEmail
    userName="Nombre del Usuario"
    companyName="Tu Empresa"
    supportEmail="soporte@tuempresa.com"
    // ...otros props
  />;
  ```

### Integración con Servicios de Email

- Usa la configuración en `emailConfig.ts` para integrar con proveedores como:
  - SendGrid
  - Mailchimp
  - Resend.com
  - Amazon SES

## 5 Autenticación y Backend

### Implementación de Auth

- Integración completa con Supabase Auth:
  ```tsx
  import { authClientService } from "@/services/client/authClientService";

  // Obtener usuario actual
  const user = await authClientService.getUser();

  // Iniciar sesión con email
  await authClientService.signInWithEmail(formData);
  ```

### Consultas a Base de Datos

- Utiliza los servicios predefinidos:
  ```tsx
  import { supabaseQueries } from "@/services/client/supabaseQueries";

  // Obtener datos
  const datos = await supabaseQueries.obtenerDatos();
  ```

### Integración con Stripe

- Implementación lista para pagos y suscripciones:
  ```tsx
  import { stripeClientService } from "@/services/client/stripeClientService";

  // Crear checkout
  await stripeClientService.crearCheckout(precioId);
  ```

## 6 Despliegue Rápido

### Preparación para Producción

- Ejecuta `pnpm build` para generar la versión optimizada
- Verifica el rendimiento con Lighthouse y corrige problemas

### Opciones de Hosting

- **Vercel**: Despliega directamente desde GitHub
  ```bash
  vercel --prod
  ```
- **Netlify**: Configura para detectar cambios en el repositorio
- **Docker**: Usa la imagen preconfigurada para entornos personalizados

### CI/CD con GitHub Actions

- Implementa flujos de trabajo automatizados para:
  - Testing
  - Linting
  - Despliegue automático
  - Análisis de rendimiento

## 7 Desarrollo Colaborativo

### Flujo de Trabajo Git

- Utiliza ramas con prefijos claros:
  - `feature/` para nuevas funcionalidades
  - `fix/` para correcciones
  - `refactor/` para mejoras de código sin cambios de funcionalidad

### Documentación en Código

- Mantén cada componente con descripción clara de Props:
  ```tsx
  /**
   * Card - Componente para mostrar información en formato tarjeta
   * @param {string} title - Título de la tarjeta
   * @param {ReactNode} children - Contenido de la tarjeta
   * @param {string} variant - Variante visual (default, bordered, elevated)
   */
  ```

## 8 Herramientas de Productividad

### VSCode Extensions

- Tailwind CSS IntelliSense
- ESLint
- Prettier
- TypeScript Error Translator
- GitHub Copilot

### Comandos Útiles

- `pnpm componentes`: Lista todos los componentes disponibles
- `pnpm new:block`: Genera un nuevo bloque con estructura optimizada
- `pnpm new:page`: Crea una nueva página con ruta configurada
- `pnpm analyze`: Analiza el tamaño del bundle

## 9 Rendimiento y Optimización

### Imágenes y Assets

- Usa el componente `Image` de Next.js para optimización automática
- Implementa lazy loading para recursos no críticos

### Estrategias de Caché

- Utiliza SWR para gestión eficiente de datos:
  ```tsx
  import useSWR from "swr";

  const { data, error } = useSWR("/api/datos", fetcher);
  ```

### SEO y Accesibilidad

- Implementa metadatos dinámicos con Next.js Head
- Sigue las guías WCAG para accesibilidad

## 10 Live Coding con IA

### GitHub Copilot

- Activa Copilot al desarrollar nuevos componentes
- Usa comandos guiados para generar código optimizado:
  ```
  // Crea un hook personalizado para gestionar el estado del formulario con validación
  ```

### Herramientas Online

- [shadcn.ui](https://ui.shadcn.com/) para componentes Radix UI + Tailwind
- [uiverse.io](https://uiverse.io/) para inspiración de componentes
- [blocks.10xdev.vip](https://blocks.10xdev.vip) para explorar bloques
  disponibles


Instrucciones iniciales para configurar, desarrollar y optimizar tu proyecto con 10xDev, incluyendo la instalación de dependencias, estructura del proyecto y uso de bloques UI.

Guía de 10xDev - Primeros Pasos


<Card
  title="🚀 Despliegue Profesional y Eficiente con Next.js"
  description="Optimiza tu infraestructura y acelera tu 'time-to-market'"
  icon="Zap"
>
  Desplegar una aplicación Next.js va más allá de subir archivos a un servidor. Esta guía te acompañará en la configuración de una infraestructura robusta, escalable y segura, aplicando las mejores prácticas de la industria. En 10xDev, sabemos que un despliegue bien planificado es clave para el éxito de tu SaaS o proyecto, permitiéndote iterar con agilidad.
</Card>

## 🧭 Elige tu Estrategia de Despliegue Ideal

Cada proyecto tiene sus propias necesidades. Comprender las diferencias entre las principales estrategias de despliegue te permitirá tomar la decisión más acertada para tu aplicación Next.js, ya sea un MVP o una plataforma empresarial consolidada.

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
  <Card className="hover:border-primary/50">
    <a href="/docs/deployment/serverless" className="block p-6"> {/* Añadido padding para mejor click target */}
      <h3 className="text-xl font-semibold mb-2 flex items-center"> {/* Aumentado tamaño de fuente y flex para alinear icono */}
        <span className="text-2xl mr-2">☁️</span> Serverless: Agilidad y Escalado Automático
      </h3>
      <p className="text-sm text-muted-foreground mb-3">
        Ideal para MVPs, startups y proyectos donde la velocidad de iteración y el escalado dinámico son cruciales. Olvídate de la gestión de servidores y céntrate en tu producto.
      </p>
      <p className="text-xs text-muted-foreground mb-3">
        <strong>Ventajas:</strong> Despliegues rápidos, pago por uso, alta disponibilidad.
      </p>
      <div className="flex flex-wrap gap-2 mt-2"> {/* Añadido flex-wrap por si hay muchos badges */}
        <Badge variant="secondary">Vercel</Badge> {/* Usar variant para estilo */}
        <Badge variant="secondary">Netlify</Badge>
        <Badge variant="secondary">AWS Amplify</Badge>
        <Badge variant="secondary">Firebase</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/deployment/container" className="block p-6">
      <h3 className="text-xl font-semibold mb-2 flex items-center">
        <span className="text-2xl mr-2">🐳</span> Contenedores: Control Total y Portabilidad
      </h3>
      <p className="text-sm text-muted-foreground mb-3">
        Perfecto para aplicaciones empresariales o con requisitos de infraestructura específicos. Ofrece máxima personalización, control del entorno y consistencia entre desarrollo y producción.
      </p>
      <p className="text-xs text-muted-foreground mb-3">
        <strong>Ventajas:</strong> Entornos aislados, portabilidad, gestión avanzada de recursos.
      </p>
      <div className="flex flex-wrap gap-2 mt-2">
        <Badge variant="secondary">Docker</Badge>
        <Badge variant="secondary">Kubernetes</Badge>
        <Badge variant="secondary">AWS ECS/EKS</Badge>
        <Badge variant="secondary">Google Cloud Run</Badge>
      </div>
    </a>
  </Card>
</div>

<Callout type="tip" title="¿No estás seguro?">
  Para la mayoría de los desarrolladores y fundadores de SaaS que trabajan con Next.js, especialmente al inicio, **Vercel (Serverless)** suele ser la opción más directa y eficiente gracias a su integración nativa. ¡Nuestros **boilerplates en 10xDev** están preconfigurados para un despliegue fluido en estas plataformas!
</Callout>

## ✅ Consideraciones Clave para un Despliegue Exitoso

Independientemente de la estrategia, hay pilares fundamentales que garantizarán que tu aplicación Next.js no solo funcione, sino que brille.

<div className="my-8 space-y-6">
  <div>
    <h3 className="text-lg font-semibold mb-2">⚡ Rendimiento y Escalabilidad</h3>
    <p className="text-sm text-muted-foreground mb-3">Una aplicación lenta frustra a los usuarios y afecta tu crecimiento. Next.js ofrece herramientas, pero la configuración correcta es vital.</p>
    <ul className="list-disc pl-5 space-y-2 text-sm">
      <li><strong>Caché Inteligente y CDN:</strong> Implementa estrategias de caché efectivas. Vercel Edge Network o Cloudflare son excelentes. Aprovecha el <a href="https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Incremental Static Regeneration (ISR)</a> de Next.js.</li>
      <li><strong>Optimización de Assets:</strong> Comprime imágenes (¡Next.js `next/image` lo hace genial!), implementa lazy loading y asegúrate de que el code splitting de Next.js funcione a tu favor.</li>
      <li><strong>Monitorización y Alertas:</strong> Configura herramientas como Sentry, Datadog o New Relic para rastrear errores, medir el rendimiento (Core Web Vitals) y recibir alertas proactivas.</li>
      <li><strong>Base de Datos Escalable:</strong> Elige una solución de base de datos que pueda crecer contigo (ej. PostgreSQL en Supabase, PlanetScale, AWS RDS, MongoDB Atlas).</li>
    </ul>
  </div>

  <div>
    <h3 className="text-lg font-semibold mb-2">🛡️ Seguridad Robusta</h3>
    <p className="text-sm text-muted-foreground mb-3">La confianza de tus usuarios es primordial. Proteger sus datos y tu aplicación no es negociable.</p>
    <ul className="list-disc pl-5 space-y-2 text-sm">
      <li><strong>HTTPS por Defecto:</strong> Indispensable. La mayoría de las plataformas modernas lo gestionan automáticamente con certificados SSL/TLS.</li>
      <li><strong>Headers de Seguridad:</strong> Configura Content Security Policy (CSP), CORS, X-Content-Type-Options, HSTS. <span className="text-xs text-primary">(Pst... algunos de nuestros templates en 10xDev incluyen configuraciones base para esto).</span></li>
      <li><strong>Gestión Segura de Secretos:</strong> Nunca hardcodees claves API o contraseñas. Utiliza variables de entorno y servicios de gestión de secretos (ej. Vercel Environment Variables, AWS Secrets Manager, Doppler).</li>
      <li><strong>Actualizaciones y Escaneo de Dependencias:</strong> Mantén tus dependencias actualizadas (npm audit, Snyk) para protegerte de vulnerabilidades conocidas.</li>
    </ul>
  </div>

  <div>
    <h3 className="text-lg font-semibold mb-2">🔄 CI/CD (Integración y Despliegue Continuo)</h3>
    <p className="text-sm text-muted-foreground mb-3">Automatiza tus despliegues para entregar valor de forma más rápida y fiable, reduciendo el riesgo de errores humanos.</p>
    <ul className="list-disc pl-5 space-y-2 text-sm">
      <li><strong>Pipelines Automatizados:</strong> Usa GitHub Actions, GitLab CI, Jenkins o las herramientas integradas de Vercel/Netlify para automatizar build, test y deploy.</li>
      <li><strong>Testing Riguroso:</strong> Integra pruebas unitarias, de integración y E2E (End-to-End) en tu pipeline. Un código bien probado es la base de un SaaS estable.</li>
      <li><strong>Rollbacks Sencillos:</strong> Asegúrate de que tu plataforma de despliegue permita revertir a versiones anteriores rápidamente si algo sale mal.</li>
      <li><strong>Entornos Diferenciados:</strong> Configura entornos de `development`, `staging` (o `preview`) y `production` para probar cambios de forma segura.</li>
    </ul>
  </div>
</div>

## 🎯 Recomendaciones Personalizadas por Perfil

Entendemos que cada uno de vosotros tiene prioridades distintas. Aquí algunas sugerencias específicas:

<div className="space-y-6 my-8">
  <Card>
    <div className="p-6"> {/* Añadido padding */}
      <h3 className="text-lg font-semibold mb-2">🚀 Para Startups y Fundadores de SaaS (MVPs)</h3>
      <p className="text-sm text-muted-foreground mb-4">Tu foco es la validación rápida y la iteración ágil con recursos limitados.</p>
      <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
        <li><strong>Serverless es tu aliado:</strong> Vercel o Netlify para despliegues instantáneos y sin gestión de infraestructura.</li>
        <li><strong>Prioriza el "Time to Market":</strong> Utiliza nuestros **boilerplates de Next.js en 10xDev** para arrancar con una base sólida, autenticación, y pagos ya integrados.</li>
        <li><strong>Dominios de prueba y previews:</strong> Aprovecha las URLs de preview automáticas para compartir avances y recoger feedback.</li>
        <li><strong>Analíticas desde el Día 1:</strong> Integra herramientas simples como Vercel Analytics, Plausible o Google Analytics para entender a tus primeros usuarios.</li>
      </ul>
    </div>
  </Card>

  <Card>
    <div className="p-6">
      <h3 className="text-lg font-semibold mb-2">💼 Para Agencias y Desarrolladores Freelance</h3>
      <p className="text-sm text-muted-foreground mb-4">Buscas eficiencia, calidad y la capacidad de entregar proyectos impresionantes a tus clientes, optimizando tus márgenes.</p>
      <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
        <li><strong>Estandariza con CI/CD:</strong> Crea pipelines reutilizables. Los **templates de CI/CD de 10xDev** pueden ser un excelente punto de partida.</li>
        <li><strong>Documentación clara del despliegue:</strong> Facilita la entrega al cliente y el mantenimiento futuro.</li>
        <li><strong>Entornos de Staging por Cliente/Proyecto:</strong> Permite validaciones antes de pasar a producción.</li>
        <li><strong>Bloques de UI y Componentes 10xDev:</strong> Acelera el desarrollo front-end con componentes de alta calidad y personalizables, asegurando consistencia y profesionalismo.</li>
      </ul>
    </div>
  </Card>

  <Card>
    <div className="p-6">
      <h3 className="text-lg font-semibold mb-2">🏢 Para Aplicaciones Empresariales y SaaS en Crecimiento</h3>
      <p className="text-sm text-muted-foreground mb-4">La escalabilidad, el control granular, la seguridad avanzada y la fiabilidad son tus máximas prioridades.</p>
      <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
        <li><strong>Contenedores (Docker/Kubernetes):</strong> Para un control total sobre el entorno y una orquestación avanzada.</li>
        <li><strong>Múltiples Entornos y Blue/Green Deployments:</strong> Implementa estrategias de despliegue sofisticadas para minimizar el riesgo.</li>
        <li><strong>Monitorización y Logging Avanzado:</strong> Configura dashboards detallados, alertas predictivas y un sistema centralizado de logs.</li>
        <li><strong>Infraestructura como Código (IaC):</strong> Utiliza herramientas como Terraform o Pulumi para gestionar tu infraestructura de forma programática y reproducible.</li>
        <li><strong>Revisa nuestras guías avanzadas en 10xDev</strong> para arquitecturas complejas y escalables. (Próximamente)</li>
      </ul>
    </div>
  </Card>
</div>

<Callout type="info" title="💡 Tus Siguientes Pasos hacia un Despliegue Impecable">
  Ahora que tienes una visión general, es momento de profundizar. Explora nuestras guías detalladas:

  - **[Guía Detallada: Despliegue Serverless con Vercel/Netlify](/docs/deployment/serverless)** - Para un arranque rápido y eficiente.
  - **[Guía Detallada: Despliegue con Contenedores (Docker & Kubernetes)](/docs/deployment/container)** - Para un control y personalización máximos.
  - **[Tutorial: Configurando tu Pipeline de CI/CD Profesional](/docs/deployment/ci-cd)** - Automatiza tus entregas como un experto.

  Y recuerda, la comunidad y los recursos de **10xDev** están aquí para ayudarte a construir y desplegar aplicaciones web y SaaS de forma más inteligente, no más difícil. ¡Explora nuestros [templates y boilerplates](/templates) para empezar con ventaja!
</Callout>

Domina el arte de desplegar tu aplicación Next.js como un profesional. Optimiza para velocidad, escalabilidad y seguridad, y lanza tus proyectos al mercado más rápido.

Guía Esencial de Despliegue para Aplicaciones Next.js Modernas


<Card
  title="Cloudinary"
  description="Gestión y optimización de activos multimedia"
  icon="Cloud"
>
  Aprende a integrar Cloudinary en tu aplicación Next.js para una gestión eficiente de archivos multimedia.
</Card>

## Configuración Inicial

### Instalación

```bash
pnpm add next-cloudinary cloudinary
```

### Variables de Entorno

```bash
# .env.local
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=tu-cloud-name
CLOUDINARY_API_KEY=tu-api-key
CLOUDINARY_API_SECRET=tu-api-secret
CLOUDINARY_UPLOAD_PRESET=tu-upload-preset
```

## Implementación

### Cliente de Cloudinary

```tsx
// lib/cloudinary.ts
import { v2 as cloudinary } from "cloudinary"

cloudinary.config({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
})

export { cloudinary }
```

### Componente de Carga de Imágenes

```tsx
// components/media/ImageUpload.tsx
"use client"

import { CldUploadWidget } from "next-cloudinary"
import Image from "next/image"
import { useState } from "react"

interface ImageUploadProps {
  onChange: (value: string) => void
  value: string
}

export function ImageUpload({ onChange, value }: ImageUploadProps) {
  const [isMounted, setIsMounted] = useState(false)

  useState(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) return null

  return (
    <div className="space-y-4 w-full">
      <CldUploadWidget
        onUpload={(result: any) => onChange(result.info.secure_url)}
        uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET}
        options={{
          maxFiles: 1,
          sources: ["local", "url", "camera"],
        }}
      >
        {({ open }) => (
          <div
            onClick={() => open?.()}
            className="relative cursor-pointer hover:opacity-70 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center gap-4 text-center p-20"
          >
            <div className="text-lg">
              Haz clic para subir una imagen
            </div>
            {value && (
              <div className="absolute inset-0 w-full h-full">
                <Image
                  fill
                  style={{ objectFit: "cover" }}
                  src={value}
                  alt="Imagen cargada"
                />
              </div>
            )}
          </div>
        )}
      </CldUploadWidget>
    </div>
  )
}
```

### API de Carga

```tsx
// app/api/upload/route.ts
import { cloudinary } from "@/lib/cloudinary"
import { NextResponse } from "next/server"

export async function POST(req: Request) {
  try {
    const { file } = await req.json()

    const result = await cloudinary.uploader.upload(file, {
      folder: "mi-aplicacion",
    })

    return NextResponse.json(result)
  } catch (error) {
    return NextResponse.json(
      { error: "Error al subir el archivo" },
      { status: 500 }
    )
  }
}
```

## Optimización de Imágenes

### Transformaciones Automáticas

```tsx
// components/media/OptimizedImage.tsx
"use client"

import { CldImage } from "next-cloudinary"

interface OptimizedImageProps {
  src: string
  alt: string
  width: number
  height: number
  sizes?: string
  priority?: boolean
}

export function OptimizedImage({
  src,
  alt,
  width,
  height,
  sizes,
  priority = false,
}: OptimizedImageProps) {
  return (
    <CldImage
      src={src}
      alt={alt}
      width={width}
      height={height}
      sizes={sizes}
      priority={priority}
      format="auto"
      quality="auto"
      loading={priority ? "eager" : "lazy"}
    />
  )
}
```

### Galería de Imágenes

```tsx
// components/media/ImageGallery.tsx
"use client"

import { CldImage } from "next-cloudinary"

interface Image {
  id: string
  url: string
  alt: string
}

interface ImageGalleryProps {
  images: Image[]
}

export function ImageGallery({ images }: ImageGalleryProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {images.map((image) => (
        <div key={image.id} className="aspect-square relative">
          <CldImage
            src={image.url}
            alt={image.alt}
            fill
            className="object-cover rounded-lg"
            sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
          />
        </div>
      ))}
    </div>
  )
}
```

## Gestión de Archivos

### Utilidades de Archivos

```tsx
// lib/media/files.ts
import { cloudinary } from "@/lib/cloudinary"

interface UploadOptions {
  folder?: string
  transformation?: any[]
  resourceType?: string
}

export async function uploadFile(
  file: string,
  options: UploadOptions = {}
) {
  try {
    const result = await cloudinary.uploader.upload(file, {
      folder: options.folder || "uploads",
      transformation: options.transformation,
      resource_type: options.resourceType || "auto",
    })

    return {
      success: true,
      data: result,
    }
  } catch (error) {
    return {
      success: false,
      error: "Error al subir el archivo",
    }
  }
}

export async function deleteFile(publicId: string) {
  try {
    const result = await cloudinary.uploader.destroy(publicId)

    return {
      success: true,
      data: result,
    }
  } catch (error) {
    return {
      success: false,
      error: "Error al eliminar el archivo",
    }
  }
}

export async function getAssetInfo(publicId: string) {
  try {
    const result = await cloudinary.api.resource(publicId)

    return {
      success: true,
      data: result,
    }
  } catch (error) {
    return {
      success: false,
      error: "Error al obtener información del archivo",
    }
  }
}
```

## Optimización y Rendimiento

### Configuración de Transformaciones

```tsx
// lib/media/transforms.ts
export const imageTransforms = {
  thumbnail: [
    { width: 150, height: 150, crop: "fill" },
    { quality: "auto", fetch_format: "auto" },
  ],
  preview: [
    { width: 300, height: 300, crop: "fill" },
    { quality: "auto", fetch_format: "auto" },
  ],
  optimized: [
    { width: "auto", dpr: "auto", crop: "scale" },
    { quality: "auto", fetch_format: "auto" },
  ],
}

export function getTransformedUrl(url: string, transform: keyof typeof imageTransforms) {
  return cloudinary.url(url, {
    transformation: imageTransforms[transform],
  })
}
```

## Mejores Prácticas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">🎯 Optimización</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Utiliza formatos modernos (WebP, AVIF)</li>
      <li>Implementa carga lazy</li>
      <li>Define tamaños responsivos</li>
      <li>Configura transformaciones automáticas</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">💾 Almacenamiento</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Organiza archivos en carpetas</li>
      <li>Usa nombres descriptivos</li>
      <li>Implementa políticas de retención</li>
      <li>Monitorea el uso de almacenamiento</li>
    </ul>
  </Card>
</div>

## Solución de Problemas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">❌ Errores Comunes</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Credenciales incorrectas</li>
      <li>Límites de cuota excedidos</li>
      <li>Formatos no soportados</li>
      <li>Problemas de CORS</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">✅ Soluciones</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Verifica las credenciales</li>
      <li>Monitorea el uso de recursos</li>
      <li>Valida formatos antes de subir</li>
      <li>Configura CORS correctamente</li>
    </ul>
  </Card>
</div>

## Monitorización

### Dashboard de Uso

```tsx
// components/media/UsageDashboard.tsx
interface StorageMetrics {
  totalAssets: number
  totalStorage: number
  bandwidthUsage: number
  transformations: number
}

export function StorageDashboard({
  metrics
}: {
  metrics: StorageMetrics
}) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <MetricCard
        title="Total Archivos"
        value={metrics.totalAssets.toLocaleString()}
        icon={<Files className="h-4 w-4" />}
      />
      <MetricCard
        title="Almacenamiento"
        value={`${(metrics.totalStorage / 1024 / 1024).toFixed(2)} GB`}
        icon={<HardDrive className="h-4 w-4" />}
      />
      <MetricCard
        title="Ancho de Banda"
        value={`${(metrics.bandwidthUsage / 1024 / 1024).toFixed(2)} GB`}
        icon={<Network className="h-4 w-4" />}
      />
      <MetricCard
        title="Transformaciones"
        value={metrics.transformations.toLocaleString()}
        icon={<Image className="h-4 w-4" />}
      />
    </div>
  )
}
```

<Callout type="info" title="Recursos Adicionales">
  - [Documentación oficial de Cloudinary](https://cloudinary.com/documentation)
  - [Guía de optimización de imágenes](https://cloudinary.com/documentation/image_optimization)
  - [Ejemplos de transformaciones](https://cloudinary.com/documentation/transformation_reference)
  - [Calculadora de costos](https://cloudinary.com/pricing)
</Callout> 

Gestión de archivos y optimización de imágenes con Cloudinary en Next.js

Integración con Cloudinary


<Card
  title="Google Analytics"
  description="Análisis y seguimiento de usuarios"
  icon="LineChart"
>
  Aprende a integrar Google Analytics 4 en tu aplicación Next.js para un seguimiento detallado del comportamiento de los usuarios.
</Card>

## Configuración Inicial

### Instalación

```bash
pnpm add @analytics/google-analytics
```

### Variables de Entorno

```bash
# .env.local
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
```

## Implementación

### Configuración de Analytics

```tsx
// lib/analytics.ts
import Analytics from "analytics"
import googleAnalytics from "@analytics/google-analytics"

export const analytics = Analytics({
  app: "mi-aplicacion",
  plugins: [
    googleAnalytics({
      measurementId: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID,
    }),
  ],
})
```

### Proveedor de Analytics

```tsx
// components/analytics/Provider.tsx
"use client"

import { usePathname, useSearchParams } from "next/navigation"
import Script from "next/script"
import { useEffect } from "react"
import { analytics } from "@/lib/analytics"

export function AnalyticsProvider({
  children,
}: {
  children: React.ReactNode
}) {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (pathname) {
      analytics.page()
    }
  }, [pathname, searchParams])

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}');
        `}
      </Script>
      {children}
    </>
  )
}
```

### Hook Personalizado

```tsx
// hooks/useAnalytics.ts
import { analytics } from "@/lib/analytics"

interface TrackEventProps {
  name: string
  properties?: Record<string, any>
}

export function useAnalytics() {
  const trackEvent = ({ name, properties }: TrackEventProps) => {
    analytics.track(name, properties)
  }

  const trackPageView = (url: string) => {
    analytics.page({
      url,
      title: document.title,
    })
  }

  const trackConversion = (value: number, currency = "EUR") => {
    analytics.track("purchase", {
      value,
      currency,
    })
  }

  return {
    trackEvent,
    trackPageView,
    trackConversion,
  }
}
```

## Eventos Personalizados

### Componente de Botón con Seguimiento

```tsx
// components/analytics/TrackedButton.tsx
"use client"

import { useAnalytics } from "@/hooks/useAnalytics"

interface TrackedButtonProps {
  eventName: string
  eventProperties?: Record<string, any>
  children: React.ReactNode
  className?: string
  onClick?: () => void
}

export function TrackedButton({
  eventName,
  eventProperties,
  children,
  className,
  onClick,
}: TrackedButtonProps) {
  const { trackEvent } = useAnalytics()

  const handleClick = () => {
    trackEvent({
      name: eventName,
      properties: eventProperties,
    })
    onClick?.()
  }

  return (
    <button
      onClick={handleClick}
      className={className}
    >
      {children}
    </button>
  )
}
```

### Seguimiento de Formularios

```tsx
// components/analytics/TrackedForm.tsx
"use client"

import { useAnalytics } from "@/hooks/useAnalytics"

interface TrackedFormProps {
  formName: string
  children: React.ReactNode
  onSubmit: (data: any) => void
  className?: string
}

export function TrackedForm({
  formName,
  children,
  onSubmit,
  className,
}: TrackedFormProps) {
  const { trackEvent } = useAnalytics()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const formData = new FormData(e.target as HTMLFormElement)
    const data = Object.fromEntries(formData)

    trackEvent({
      name: "form_submission",
      properties: {
        form_name: formName,
        ...data,
      },
    })

    onSubmit(data)
  }

  return (
    <form onSubmit={handleSubmit} className={className}>
      {children}
    </form>
  )
}
```

## Métricas y Reportes

### Dashboard de Métricas

```tsx
// components/analytics/MetricsDashboard.tsx
interface AnalyticsMetrics {
  pageViews: number
  uniqueVisitors: number
  bounceRate: number
  avgSessionDuration: number
  topPages: Array<{
    path: string
    views: number
  }>
}

export function MetricsDashboard({
  metrics
}: {
  metrics: AnalyticsMetrics
}) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <MetricCard
        title="Vistas de Página"
        value={metrics.pageViews.toLocaleString()}
        icon={<Eye className="h-4 w-4" />}
      />
      <MetricCard
        title="Visitantes Únicos"
        value={metrics.uniqueVisitors.toLocaleString()}
        icon={<Users className="h-4 w-4" />}
      />
      <MetricCard
        title="Tasa de Rebote"
        value={`${metrics.bounceRate.toFixed(2)}%`}
        icon={<ArrowLeftRight className="h-4 w-4" />}
      />
      <MetricCard
        title="Duración Media"
        value={`${Math.floor(metrics.avgSessionDuration / 60)}m ${metrics.avgSessionDuration % 60}s`}
        icon={<Clock className="h-4 w-4" />}
      />
      <div className="col-span-2 md:col-span-4">
        <TopPagesChart data={metrics.topPages} />
      </div>
    </div>
  )
}
```

## Mejores Prácticas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">🎯 Seguimiento</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Define eventos relevantes</li>
      <li>Utiliza nombres descriptivos</li>
      <li>Agrupa eventos relacionados</li>
      <li>Valida los datos enviados</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">📊 Análisis</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Configura objetivos</li>
      <li>Crea segmentos de usuarios</li>
      <li>Analiza el embudo de conversión</li>
      <li>Monitorea el rendimiento</li>
    </ul>
  </Card>
</div>

## Solución de Problemas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">❌ Errores Comunes</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>ID de medición incorrecto</li>
      <li>Bloqueo por adblockers</li>
      <li>Eventos no registrados</li>
      <li>Datos inconsistentes</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">✅ Soluciones</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Verifica la configuración</li>
      <li>Implementa fallbacks</li>
      <li>Valida el seguimiento</li>
      <li>Usa el modo debug</li>
    </ul>
  </Card>
</div>

## Privacidad y Cumplimiento

### Banner de Cookies

```tsx
// components/analytics/CookieBanner.tsx
"use client"

import { useState, useEffect } from "react"
import { analytics } from "@/lib/analytics"

export function CookieBanner() {
  const [showBanner, setShowBanner] = useState(false)

  useEffect(() => {
    const consent = localStorage.getItem("analytics-consent")
    setShowBanner(!consent)
  }, [])

  const acceptCookies = () => {
    localStorage.setItem("analytics-consent", "true")
    setShowBanner(false)
    analytics.enable()
  }

  const declineCookies = () => {
    localStorage.setItem("analytics-consent", "false")
    setShowBanner(false)
    analytics.disable()
  }

  if (!showBanner) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg">
      <div className="container mx-auto flex items-center justify-between">
        <p className="text-sm text-gray-600">
          Utilizamos cookies para mejorar tu experiencia.
        </p>
        <div className="flex gap-2">
          <button
            onClick={acceptCookies}
            className="px-4 py-2 bg-primary text-white rounded-lg"
          >
            Aceptar
          </button>
          <button
            onClick={declineCookies}
            className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg"
          >
            Rechazar
          </button>
        </div>
      </div>
    </div>
  )
}
```

<Callout type="info" title="Recursos Adicionales">
  - [Documentación oficial de GA4](https://developers.google.com/analytics)
  - [Guía de eventos](https://support.google.com/analytics/answer/9322688)
  - [Mejores prácticas de implementación](https://developers.google.com/analytics/devguides/collection/ga4/best-practices)
  - [Centro de ayuda de GA4](https://support.google.com/analytics)
</Callout> 

Implementación y configuración de Google Analytics 4 en Next.js

Integración con Google Analytics


<Card
  title="OAuth"
  description="Autenticación segura con múltiples proveedores"
  icon="Lock"
>
  Aprende a implementar autenticación OAuth en tu aplicación Next.js con proveedores populares como Google, GitHub, y más.
</Card>

## Configuración Inicial

### Instalación

```bash
pnpm add next-auth @auth/core @auth/prisma-adapter
```

### Variables de Entorno

```bash
# .env.local
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=tu-secreto-seguro

# Google OAuth
GOOGLE_ID=tu-client-id
GOOGLE_SECRET=tu-client-secret

# GitHub OAuth
GITHUB_ID=tu-client-id
GITHUB_SECRET=tu-client-secret
```

## Implementación

### Configuración de NextAuth

```tsx
// pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import GithubProvider from "next-auth/providers/github"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/lib/prisma"

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID!,
      clientSecret: process.env.GOOGLE_SECRET!,
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async session({ session, token }) {
      if (session?.user) {
        session.user.id = token.sub!;
      }
      return session;
    },
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
  },
  pages: {
    signIn: "/auth/signin",
    error: "/auth/error",
  },
})
```

### Componente de Inicio de Sesión

```tsx
// components/auth/SignInButtons.tsx
import { signIn } from "next-auth/react"

interface Provider {
  id: string
  name: string
  icon: React.ReactNode
}

const providers: Provider[] = [
  {
    id: "google",
    name: "Google",
    icon: <GoogleIcon className="h-5 w-5" />,
  },
  {
    id: "github",
    name: "GitHub",
    icon: <GitHubIcon className="h-5 w-5" />,
  },
]

export function SignInButtons() {
  return (
    <div className="space-y-4">
      {providers.map((provider) => (
        <button
          key={provider.id}
          onClick={() => signIn(provider.id)}
          className="flex items-center justify-center w-full gap-3 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
        >
          {provider.icon}
          Continuar con {provider.name}
        </button>
      ))}
    </div>
  )
}
```

### Protección de Rutas

```tsx
// middleware.ts
import { withAuth } from "next-auth/middleware"

export default withAuth({
  callbacks: {
    authorized({ req, token }) {
      // Personaliza la lógica de autorización
      const path = req.nextUrl.pathname
      
      if (path.startsWith("/admin")) {
        return token?.role === "admin"
      }
      
      return !!token
    },
  },
})

export const config = {
  matcher: [
    "/dashboard/:path*",
    "/admin/:path*",
    "/api/protected/:path*",
  ],
}
```

## Gestión de Sesiones

### Proveedor de Sesión

```tsx
// app/providers.tsx
"use client"

import { SessionProvider } from "next-auth/react"

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>
}
```

### Hook de Autenticación

```tsx
// hooks/useAuth.ts
import { useSession, signIn, signOut } from "next-auth/react"

export function useAuth() {
  const { data: session, status } = useSession()
  
  const isAuthenticated = status === "authenticated"
  const isLoading = status === "loading"
  
  return {
    session,
    isAuthenticated,
    isLoading,
    signIn,
    signOut,
  }
}
```

## Personalización

### Página de Inicio de Sesión

```tsx
// app/auth/signin/page.tsx
import { SignInButtons } from "@/components/auth/SignInButtons"

export default function SignInPage() {
  return (
    <div className="max-w-md mx-auto p-8">
      <h1 className="text-2xl font-bold text-center mb-8">
        Iniciar Sesión
      </h1>
      
      <SignInButtons />
      
      <p className="mt-4 text-sm text-center text-gray-600">
        Al continuar, aceptas nuestros{" "}
        <a href="/terms" className="text-primary hover:underline">
          Términos de Servicio
        </a>
      </p>
    </div>
  )
}
```

### Página de Error

```tsx
// app/auth/error/page.tsx
import { useSearchParams } from "next/navigation"

export default function AuthErrorPage() {
  const searchParams = useSearchParams()
  const error = searchParams.get("error")
  
  const errorMessages = {
    Configuration: "Hay un problema con la configuración del servidor.",
    AccessDenied: "No tienes permiso para acceder a este recurso.",
    Verification: "El enlace de verificación ha expirado o ya ha sido usado.",
    Default: "Ocurrió un error durante la autenticación.",
  }
  
  return (
    <div className="max-w-md mx-auto p-8">
      <h1 className="text-2xl font-bold text-center text-red-600 mb-4">
        Error de Autenticación
      </h1>
      
      <p className="text-center text-gray-600">
        {errorMessages[error as keyof typeof errorMessages] || 
         errorMessages.Default}
      </p>
      
      <button
        onClick={() => window.location.href = "/auth/signin"}
        className="mt-4 w-full px-4 py-2 bg-primary text-white rounded-lg"
      >
        Volver a Intentar
      </button>
    </div>
  )
}
```

## Mejores Prácticas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">🔐 Seguridad</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Usa HTTPS en producción</li>
      <li>Mantén las claves secretas seguras</li>
      <li>Implementa CSRF protection</li>
      <li>Configura políticas de CORS</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">⚡ Rendimiento</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Usa JWT para sesiones</li>
      <li>Implementa caching de sesión</li>
      <li>Optimiza las llamadas a la base de datos</li>
      <li>Maneja estados de carga</li>
    </ul>
  </Card>
</div>

## Solución de Problemas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">❌ Errores Comunes</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>URLs de callback incorrectas</li>
      <li>Claves de API inválidas</li>
      <li>NEXTAUTH_URL mal configurado</li>
      <li>Middleware mal configurado</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">✅ Soluciones</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Verifica las URLs en la consola del proveedor</li>
      <li>Revisa las variables de entorno</li>
      <li>Configura correctamente el dominio</li>
      <li>Ajusta las rutas protegidas</li>
    </ul>
  </Card>
</div>

## Proveedores Adicionales

### Configuración de Otros Proveedores

```tsx
// pages/api/auth/[...nextauth].ts
import DiscordProvider from "next-auth/providers/discord"
import TwitterProvider from "next-auth/providers/twitter"

export default NextAuth({
  providers: [
    // ... otros proveedores
    DiscordProvider({
      clientId: process.env.DISCORD_ID!,
      clientSecret: process.env.DISCORD_SECRET!,
    }),
    TwitterProvider({
      clientId: process.env.TWITTER_ID!,
      clientSecret: process.env.TWITTER_SECRET!,
      version: "2.0",
    }),
  ],
})
```

<Callout type="info" title="Recursos Adicionales">
  - [Documentación oficial de NextAuth.js](https://next-auth.js.org)
  - [Guía de proveedores OAuth](https://next-auth.js.org/providers)
  - [Ejemplos de implementación](https://github.com/nextauthjs/next-auth-example)
  - [Mejores prácticas de seguridad](https://next-auth.js.org/security)
</Callout> 

Implementa autenticación segura con múltiples proveedores en tu aplicación Next.js

Integración con OAuth


<Card
  title="OpenAI"
  description="Inteligencia artificial y generación de contenido"
  icon="Brain"
>
  Aprende a integrar las APIs de OpenAI en tu aplicación Next.js para añadir capacidades de IA.
</Card>

## Configuración Inicial

### Instalación

```bash
pnpm add openai ai
```

### Variables de Entorno

```bash
# .env.local
OPENAI_API_KEY=sk-...
```

## Implementación

### Cliente de OpenAI

```tsx
// lib/openai.ts
import OpenAI from "openai"

export const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})
```

### API de Chat

```tsx
// app/api/chat/route.ts
import { OpenAIStream, StreamingTextResponse } from "ai"
import { openai } from "@/lib/openai"

export const runtime = "edge"

export async function POST(req: Request) {
  const { messages } = await req.json()

  const response = await openai.chat.completions.create({
    model: "gpt-4",
    stream: true,
    messages: messages,
    temperature: 0.7,
    max_tokens: 500,
  })

  const stream = OpenAIStream(response)
  return new StreamingTextResponse(stream)
}
```

### Componente de Chat

```tsx
// components/ai/Chat.tsx
"use client"

import { useChat } from "ai/react"

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div className="flex flex-col h-[600px]">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${
              message.role === "user" ? "justify-end" : "justify-start"
            }`}
          >
            <div
              className={`max-w-[80%] rounded-lg p-4 ${
                message.role === "user"
                  ? "bg-primary text-white"
                  : "bg-gray-100"
              }`}
            >
              {message.content}
            </div>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="p-4 border-t">
        <div className="flex gap-2">
          <input
            value={input}
            onChange={handleInputChange}
            placeholder="Escribe un mensaje..."
            className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
          />
          <button
            type="submit"
            className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
          >
            Enviar
          </button>
        </div>
      </form>
    </div>
  )
}
```

## Casos de Uso

### Generación de Texto

```tsx
// lib/ai/text.ts
import { openai } from "@/lib/openai"

interface GenerateTextProps {
  prompt: string
  maxTokens?: number
  temperature?: number
}

export async function generateText({
  prompt,
  maxTokens = 500,
  temperature = 0.7,
}: GenerateTextProps) {
  const response = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [{ role: "user", content: prompt }],
    max_tokens: maxTokens,
    temperature: temperature,
  })

  return response.choices[0].message.content
}
```

### Análisis de Sentimiento

```tsx
// lib/ai/sentiment.ts
import { openai } from "@/lib/openai"

export async function analyzeSentiment(text: string) {
  const response = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [
      {
        role: "system",
        content: "Analiza el sentimiento del siguiente texto y responde con: POSITIVO, NEGATIVO o NEUTRAL",
      },
      {
        role: "user",
        content: text,
      },
    ],
    temperature: 0,
    max_tokens: 10,
  })

  return response.choices[0].message.content?.trim()
}
```

### Generación de Imágenes

```tsx
// lib/ai/image.ts
import { openai } from "@/lib/openai"

interface GenerateImageProps {
  prompt: string
  size?: "256x256" | "512x512" | "1024x1024"
  quality?: "standard" | "hd"
  style?: "vivid" | "natural"
}

export async function generateImage({
  prompt,
  size = "1024x1024",
  quality = "standard",
  style = "vivid",
}: GenerateImageProps) {
  const response = await openai.images.generate({
    model: "dall-e-3",
    prompt,
    size,
    quality,
    style,
  })

  return response.data[0].url
}
```

## Optimización y Costos

### Rate Limiting

```tsx
// lib/ai/rateLimit.ts
import { Ratelimit } from "@upstash/ratelimit"
import { Redis } from "@upstash/redis"

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_URL!,
  token: process.env.UPSTASH_REDIS_TOKEN!,
})

export const rateLimiter = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(10, "1 m"),
})

export async function checkRateLimit(identifier: string) {
  const { success, limit, reset, remaining } = await rateLimiter.limit(
    identifier
  )

  return {
    success,
    limit,
    reset,
    remaining,
  }
}
```

### Caché de Respuestas

```tsx
// lib/ai/cache.ts
import { Redis } from "@upstash/redis"

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_URL!,
  token: process.env.UPSTASH_REDIS_TOKEN!,
})

export async function getCachedResponse(key: string) {
  return await redis.get(key)
}

export async function cacheResponse(
  key: string,
  value: any,
  expirationInSeconds = 3600
) {
  await redis.set(key, value, { ex: expirationInSeconds })
}
```

## Mejores Prácticas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">🎯 Prompts</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Sé específico y claro</li>
      <li>Proporciona contexto suficiente</li>
      <li>Usa ejemplos cuando sea necesario</li>
      <li>Ajusta la temperatura según el caso</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">💰 Costos</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Implementa límites de uso</li>
      <li>Utiliza caché cuando sea posible</li>
      <li>Monitorea el consumo de tokens</li>
      <li>Optimiza las solicitudes</li>
    </ul>
  </Card>
</div>

## Solución de Problemas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">❌ Errores Comunes</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>API key inválida</li>
      <li>Límites de tokens excedidos</li>
      <li>Rate limiting</li>
      <li>Prompts mal formulados</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">✅ Soluciones</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Verifica la API key</li>
      <li>Ajusta los límites de tokens</li>
      <li>Implementa retry logic</li>
      <li>Mejora la estructura de prompts</li>
    </ul>
  </Card>
</div>

## Monitorización

### Dashboard de Uso

```tsx
// components/ai/UsageDashboard.tsx
interface UsageMetrics {
  totalTokens: number
  totalCost: number
  requestsPerDay: number[]
  modelUsage: Record<string, number>
}

export function UsageDashboard({
  metrics
}: {
  metrics: UsageMetrics
}) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <MetricCard
        title="Total Tokens"
        value={metrics.totalTokens.toLocaleString()}
        icon={<Token className="h-4 w-4" />}
      />
      <MetricCard
        title="Costo Total"
        value={`$${metrics.totalCost.toFixed(2)}`}
        icon={<DollarSign className="h-4 w-4" />}
      />
      <UsageChart data={metrics.requestsPerDay} />
      <ModelDistribution data={metrics.modelUsage} />
    </div>
  )
}
```

<Callout type="info" title="Recursos Adicionales">
  - [Documentación oficial de OpenAI](https://platform.openai.com/docs)
  - [Guía de mejores prácticas](https://platform.openai.com/docs/guides/best-practices)
  - [Ejemplos de implementación](https://platform.openai.com/examples)
  - [Calculadora de costos](https://openai.com/pricing)
</Callout> 

Implementa funcionalidades de IA en tu aplicación Next.js con OpenAI

Integración con OpenAI


<Card
  title="Resend"
  description="Emails transaccionales y marketing"
  icon="Mail"
>
  Aprende a integrar Resend en tu aplicación Next.js para enviar emails de forma eficiente y confiable.
</Card>

## Configuración Inicial

### Instalación

```bash
pnpm add resend @react-email/components react-email
```

### Variables de Entorno

```bash
# .env.local
RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=notifications@tudominio.com
```

## Implementación

### Cliente de Resend

```tsx
// lib/email.ts
import { Resend } from "resend"

export const resend = new Resend(process.env.RESEND_API_KEY)
```

### Plantilla de Email

```tsx
// emails/WelcomeEmail.tsx
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Link,
  Preview,
  Section,
  Text,
} from "@react-email/components"

interface WelcomeEmailProps {
  username: string
  verifyUrl: string
}

export function WelcomeEmail({
  username,
  verifyUrl,
}: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Bienvenido a nuestra plataforma</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>
            ¡Bienvenido, {username}!
          </Heading>
          <Text style={text}>
            Gracias por registrarte en nuestra plataforma. Para comenzar,
            necesitamos verificar tu dirección de email.
          </Text>
          <Section style={buttonContainer}>
            <Button
              pX={20}
              pY={12}
              style={button}
              href={verifyUrl}
            >
              Verificar Email
            </Button>
          </Section>
          <Text style={text}>
            Si no creaste esta cuenta, puedes ignorar este email.
          </Text>
          <Hr style={hr} />
          <Text style={footer}>
            © 2024 Tu Empresa. Todos los derechos reservados.{" "}
            <Link href="https://tudominio.com">tudominio.com</Link>
          </Text>
        </Container>
      </Body>
    </Html>
  )
}

const main = {
  backgroundColor: "#ffffff",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
}

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
  maxWidth: "560px",
}

const h1 = {
  color: "#333",
  fontSize: "24px",
  fontWeight: "bold",
  margin: "40px 0",
  padding: "0",
}

const text = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "24px",
  margin: "16px 0",
}

const buttonContainer = {
  padding: "27px 0 27px",
}

const button = {
  backgroundColor: "#000",
  borderRadius: "3px",
  color: "#fff",
  fontSize: "16px",
  textDecoration: "none",
  textAlign: "center" as const,
  display: "block",
}

const hr = {
  borderColor: "#cccccc",
  margin: "20px 0",
}

const footer = {
  color: "#8898aa",
  fontSize: "12px",
}
```

### API de Envío

```tsx
// app/api/email/send/route.ts
import { resend } from "@/lib/email"
import { WelcomeEmail } from "@/emails/WelcomeEmail"
import { NextResponse } from "next/server"

export async function POST(req: Request) {
  try {
    const { to, username, verifyUrl } = await req.json()

    const data = await resend.emails.send({
      from: process.env.RESEND_FROM_EMAIL!,
      to,
      subject: "¡Bienvenido a nuestra plataforma!",
      react: WelcomeEmail({
        username,
        verifyUrl,
      }),
    })

    return NextResponse.json(data)
  } catch (error) {
    return NextResponse.json(
      { error: "Error al enviar el email" },
      { status: 500 }
    )
  }
}
```

## Tipos de Emails

### Email de Verificación

```tsx
// emails/VerificationEmail.tsx
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components"

interface VerificationEmailProps {
  code: string
}

export function VerificationEmail({ code }: VerificationEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Tu código de verificación</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Verifica tu cuenta</Heading>
          <Text style={text}>
            Tu código de verificación es:
          </Text>
          <Section style={codeContainer}>
            <Text style={codeText}>{code}</Text>
          </Section>
          <Text style={text}>
            Este código expirará en 10 minutos.
          </Text>
        </Container>
      </Body>
    </Html>
  )
}

const main = {
  backgroundColor: "#ffffff",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
}

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
  maxWidth: "560px",
}

const h1 = {
  color: "#333",
  fontSize: "24px",
  fontWeight: "bold",
  margin: "40px 0",
  padding: "0",
}

const text = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "24px",
  margin: "16px 0",
}

const codeContainer = {
  background: "#f4f4f4",
  borderRadius: "4px",
  margin: "16px 0",
  padding: "24px",
}

const codeText = {
  color: "#000",
  fontSize: "32px",
  fontWeight: "bold",
  letterSpacing: "4px",
  margin: "0",
  textAlign: "center" as const,
}
```

### Email de Notificación

```tsx
// emails/NotificationEmail.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components"

interface NotificationEmailProps {
  title: string
  message: string
  actionUrl?: string
}

export function NotificationEmail({
  title,
  message,
  actionUrl,
}: NotificationEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>{title}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>{title}</Heading>
          <Text style={text}>{message}</Text>
          {actionUrl && (
            <Section style={buttonContainer}>
              <Button
                pX={20}
                pY={12}
                style={button}
                href={actionUrl}
              >
                Ver Detalles
              </Button>
            </Section>
          )}
        </Container>
      </Body>
    </Html>
  )
}

const main = {
  backgroundColor: "#ffffff",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
}

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
  maxWidth: "560px",
}

const h1 = {
  color: "#333",
  fontSize: "24px",
  fontWeight: "bold",
  margin: "40px 0",
  padding: "0",
}

const text = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "24px",
  margin: "16px 0",
}

const buttonContainer = {
  padding: "27px 0 27px",
}

const button = {
  backgroundColor: "#000",
  borderRadius: "3px",
  color: "#fff",
  fontSize: "16px",
  textDecoration: "none",
  textAlign: "center" as const,
  display: "block",
}
```

## Utilidades

### Servicio de Email

```tsx
// lib/services/email.ts
import { resend } from "@/lib/email"
import { WelcomeEmail } from "@/emails/WelcomeEmail"
import { VerificationEmail } from "@/emails/VerificationEmail"
import { NotificationEmail } from "@/emails/NotificationEmail"

export class EmailService {
  static async sendWelcome(to: string, username: string, verifyUrl: string) {
    return await resend.emails.send({
      from: process.env.RESEND_FROM_EMAIL!,
      to,
      subject: "¡Bienvenido a nuestra plataforma!",
      react: WelcomeEmail({
        username,
        verifyUrl,
      }),
    })
  }

  static async sendVerification(to: string, code: string) {
    return await resend.emails.send({
      from: process.env.RESEND_FROM_EMAIL!,
      to,
      subject: "Verifica tu cuenta",
      react: VerificationEmail({
        code,
      }),
    })
  }

  static async sendNotification(
    to: string,
    title: string,
    message: string,
    actionUrl?: string
  ) {
    return await resend.emails.send({
      from: process.env.RESEND_FROM_EMAIL!,
      to,
      subject: title,
      react: NotificationEmail({
        title,
        message,
        actionUrl,
      }),
    })
  }
}
```

## Mejores Prácticas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">📧 Diseño</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Usa diseños responsivos</li>
      <li>Optimiza para clientes móviles</li>
      <li>Mantén el HTML simple</li>
      <li>Prueba en múltiples clientes</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">🚀 Envío</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Implementa colas</li>
      <li>Maneja rebotes</li>
      <li>Monitorea entregas</li>
      <li>Respeta límites de envío</li>
    </ul>
  </Card>
</div>

## Solución de Problemas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">❌ Errores Comunes</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>API key inválida</li>
      <li>Dominio no verificado</li>
      <li>Límites excedidos</li>
      <li>Plantillas inválidas</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">✅ Soluciones</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Verifica credenciales</li>
      <li>Configura DNS</li>
      <li>Monitorea cuotas</li>
      <li>Valida plantillas</li>
    </ul>
  </Card>
</div>

## Monitorización

### Dashboard de Emails

```tsx
// components/email/EmailDashboard.tsx
interface EmailMetrics {
  totalSent: number
  delivered: number
  opened: number
  clicked: number
  bounced: number
  deliveryRate: number
  openRate: number
  clickRate: number
}

export function EmailDashboard({
  metrics
}: {
  metrics: EmailMetrics
}) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <MetricCard
        title="Emails Enviados"
        value={metrics.totalSent.toLocaleString()}
        icon={<Send className="h-4 w-4" />}
      />
      <MetricCard
        title="Tasa de Entrega"
        value={`${metrics.deliveryRate.toFixed(1)}%`}
        icon={<CheckCircle className="h-4 w-4" />}
      />
      <MetricCard
        title="Tasa de Apertura"
        value={`${metrics.openRate.toFixed(1)}%`}
        icon={<Eye className="h-4 w-4" />}
      />
      <MetricCard
        title="Tasa de Clics"
        value={`${metrics.clickRate.toFixed(1)}%`}
        icon={<MousePointer className="h-4 w-4" />}
      />
    </div>
  )
}
```

<Callout type="info" title="Recursos Adicionales">
  - [Documentación oficial de Resend](https://resend.com/docs)
  - [Guía de React Email](https://react.email)
  - [Ejemplos de plantillas](https://resend.com/templates)
  - [Centro de ayuda](https://resend.com/help)
</Callout> 

Implementación de emails transaccionales con Resend en Next.js

Integración con Resend


<Card
  title="Stripe"
  description="Procesamiento de pagos y suscripciones"
  icon="CreditCard"
>
  Aprende a integrar Stripe en tu aplicación Next.js para procesar pagos de forma segura.
</Card>

## Configuración Inicial

### Instalación

```bash
pnpm add stripe @stripe/stripe-js
```

### Variables de Entorno

```bash
# .env.local
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
```

## Implementación

### Cliente de Stripe

```tsx
// lib/stripe.ts
import Stripe from "stripe"

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2023-10-16",
  typescript: true,
})
```

### Checkout

```tsx
// app/api/checkout/route.ts
import { stripe } from "@/lib/stripe"
import { NextResponse } from "next/server"

export async function POST(req: Request) {
  try {
    const { price, quantity = 1, metadata = {} } = await req.json()

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price,
          quantity,
        },
      ],
      mode: "payment",
      success_url: `${req.headers.get("origin")}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${req.headers.get("origin")}/cancel`,
      metadata,
    })

    return NextResponse.json({ sessionId: session.id })
  } catch (error) {
    return NextResponse.json(
      { error: "Error al crear la sesión de pago" },
      { status: 500 }
    )
  }
}
```

### Botón de Pago

```tsx
// components/payments/CheckoutButton.tsx
"use client"

import { loadStripe } from "@stripe/stripe-js"
import { useState } from "react"

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
)

interface CheckoutButtonProps {
  priceId: string
  quantity?: number
  metadata?: Record<string, string>
  children: React.ReactNode
  className?: string
}

export function CheckoutButton({
  priceId,
  quantity,
  metadata,
  children,
  className,
}: CheckoutButtonProps) {
  const [loading, setLoading] = useState(false)

  const handleCheckout = async () => {
    try {
      setLoading(true)

      const response = await fetch("/api/checkout", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          price: priceId,
          quantity,
          metadata,
        }),
      })

      const { sessionId } = await response.json()
      const stripe = await stripePromise

      await stripe?.redirectToCheckout({
        sessionId,
      })
    } catch (error) {
      console.error("Error al iniciar el checkout:", error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <button
      onClick={handleCheckout}
      disabled={loading}
      className={className}
    >
      {loading ? "Procesando..." : children}
    </button>
  )
}
```

## Suscripciones

### Creación de Suscripción

```tsx
// app/api/subscriptions/route.ts
import { stripe } from "@/lib/stripe"
import { NextResponse } from "next/server"

export async function POST(req: Request) {
  try {
    const { priceId, customerId, metadata = {} } = await req.json()

    const subscription = await stripe.subscriptions.create({
      customer: customerId,
      items: [{ price: priceId }],
      payment_behavior: "default_incomplete",
      payment_settings: {
        save_default_payment_method: "on_subscription",
      },
      expand: ["latest_invoice.payment_intent"],
      metadata,
    })

    return NextResponse.json({
      subscriptionId: subscription.id,
      clientSecret: (
        subscription.latest_invoice as Stripe.Invoice
      ).payment_intent?.client_secret,
    })
  } catch (error) {
    return NextResponse.json(
      { error: "Error al crear la suscripción" },
      { status: 500 }
    )
  }
}
```

### Formulario de Suscripción

```tsx
// components/payments/SubscriptionForm.tsx
"use client"

import { useState } from "react"
import {
  Elements,
  PaymentElement,
  useStripe,
  useElements,
} from "@stripe/stripe-js"

interface SubscriptionFormProps {
  clientSecret: string
  returnUrl: string
}

function SubscriptionFormContent({
  returnUrl,
}: {
  returnUrl: string
}) {
  const stripe = useStripe()
  const elements = useElements()
  const [error, setError] = useState<string>()
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!stripe || !elements) return

    try {
      setLoading(true)
      setError(undefined)

      const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: returnUrl,
        },
      })

      if (error) {
        setError(error.message)
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <PaymentElement />
      {error && (
        <div className="text-red-500 text-sm">{error}</div>
      )}
      <button
        type="submit"
        disabled={!stripe || loading}
        className="w-full px-4 py-2 bg-primary text-white rounded-lg disabled:opacity-50"
      >
        {loading ? "Procesando..." : "Suscribirse"}
      </button>
    </form>
  )
}

export function SubscriptionForm({
  clientSecret,
  returnUrl,
}: SubscriptionFormProps) {
  return (
    <Elements
      stripe={stripePromise}
      options={{
        clientSecret,
        appearance: {
          theme: "stripe",
        },
      }}
    >
      <SubscriptionFormContent returnUrl={returnUrl} />
    </Elements>
  )
}
```

## Webhooks

### Manejador de Webhooks

```tsx
// app/api/webhooks/route.ts
import { stripe } from "@/lib/stripe"
import { headers } from "next/headers"
import { NextResponse } from "next/server"

export async function POST(req: Request) {
  const body = await req.text()
  const signature = headers().get("stripe-signature")!

  try {
    const event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    )

    switch (event.type) {
      case "checkout.session.completed": {
        const session = event.data.object as Stripe.Checkout.Session
        // Procesar el pago completado
        break
      }
      case "invoice.payment_succeeded": {
        const invoice = event.data.object as Stripe.Invoice
        // Procesar el pago de factura exitoso
        break
      }
      case "customer.subscription.updated": {
        const subscription = event.data.object as Stripe.Subscription
        // Procesar actualización de suscripción
        break
      }
      case "customer.subscription.deleted": {
        const subscription = event.data.object as Stripe.Subscription
        // Procesar cancelación de suscripción
        break
      }
    }

    return NextResponse.json({ received: true })
  } catch (error) {
    console.error("Error al procesar webhook:", error)
    return NextResponse.json(
      { error: "Error al procesar webhook" },
      { status: 400 }
    )
  }
}

export const runtime = "edge"
```

## Gestión de Clientes

### Utilidades de Cliente

```tsx
// lib/payments/customer.ts
import { stripe } from "@/lib/stripe"

export async function createCustomer(email: string, metadata = {}) {
  const customer = await stripe.customers.create({
    email,
    metadata,
  })

  return customer
}

export async function getCustomer(customerId: string) {
  const customer = await stripe.customers.retrieve(customerId)
  return customer
}

export async function updateCustomer(
  customerId: string,
  data: Stripe.CustomerUpdateParams
) {
  const customer = await stripe.customers.update(customerId, data)
  return customer
}

export async function deleteCustomer(customerId: string) {
  const deleted = await stripe.customers.del(customerId)
  return deleted
}
```

## Portal de Facturación

### Configuración del Portal

```tsx
// app/api/billing-portal/route.ts
import { stripe } from "@/lib/stripe"
import { NextResponse } from "next/server"

export async function POST(req: Request) {
  try {
    const { customerId, returnUrl } = await req.json()

    const session = await stripe.billingPortal.sessions.create({
      customer: customerId,
      return_url: returnUrl,
    })

    return NextResponse.json({ url: session.url })
  } catch (error) {
    return NextResponse.json(
      { error: "Error al crear la sesión del portal" },
      { status: 500 }
    )
  }
}
```

### Botón del Portal

```tsx
// components/payments/BillingPortalButton.tsx
"use client"

import { useState } from "react"

interface BillingPortalButtonProps {
  customerId: string
  returnUrl: string
  children: React.ReactNode
  className?: string
}

export function BillingPortalButton({
  customerId,
  returnUrl,
  children,
  className,
}: BillingPortalButtonProps) {
  const [loading, setLoading] = useState(false)

  const handleClick = async () => {
    try {
      setLoading(true)

      const response = await fetch("/api/billing-portal", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          customerId,
          returnUrl,
        }),
      })

      const { url } = await response.json()
      window.location.href = url
    } catch (error) {
      console.error("Error al abrir el portal:", error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <button
      onClick={handleClick}
      disabled={loading}
      className={className}
    >
      {loading ? "Cargando..." : children}
    </button>
  )
}
```

## Mejores Prácticas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">🔒 Seguridad</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Usa HTTPS</li>
      <li>Valida webhooks</li>
      <li>Protege las claves API</li>
      <li>Implementa autenticación</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">💳 Pagos</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Maneja errores</li>
      <li>Valida montos</li>
      <li>Usa modo de prueba</li>
      <li>Documenta transacciones</li>
    </ul>
  </Card>
</div>

## Solución de Problemas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">❌ Errores Comunes</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Claves API incorrectas</li>
      <li>Webhooks no configurados</li>
      <li>Errores de validación</li>
      <li>Problemas de red</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">✅ Soluciones</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Verifica las claves</li>
      <li>Configura webhooks</li>
      <li>Valida los datos</li>
      <li>Implementa reintentos</li>
    </ul>
  </Card>
</div>

## Monitorización

### Dashboard de Pagos

```tsx
// components/payments/PaymentsDashboard.tsx
interface PaymentMetrics {
  totalRevenue: number
  successfulPayments: number
  failedPayments: number
  averageOrderValue: number
  revenueByDay: Array<{
    date: string
    amount: number
  }>
}

export function PaymentsDashboard({
  metrics
}: {
  metrics: PaymentMetrics
}) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <MetricCard
        title="Ingresos Totales"
        value={`$${metrics.totalRevenue.toLocaleString()}`}
        icon={<DollarSign className="h-4 w-4" />}
      />
      <MetricCard
        title="Pagos Exitosos"
        value={metrics.successfulPayments.toLocaleString()}
        icon={<CheckCircle className="h-4 w-4" />}
      />
      <MetricCard
        title="Pagos Fallidos"
        value={metrics.failedPayments.toLocaleString()}
        icon={<XCircle className="h-4 w-4" />}
      />
      <MetricCard
        title="Valor Promedio"
        value={`$${metrics.averageOrderValue.toFixed(2)}`}
        icon={<TrendingUp className="h-4 w-4" />}
      />
      <div className="col-span-2 md:col-span-4">
        <RevenueChart data={metrics.revenueByDay} />
      </div>
    </div>
  )
}
```

<Callout type="info" title="Recursos Adicionales">
  - [Documentación oficial de Stripe](https://stripe.com/docs)
  - [Guía de integración](https://stripe.com/docs/payments/quickstart)
  - [Referencia de API](https://stripe.com/docs/api)
  - [Centro de ayuda](https://support.stripe.com)
</Callout> 

Implementación de pagos seguros con Stripe en Next.js

Integración con Stripe


[Supabase](https://supabase.com) es una alternativa de código abierto a Firebase que proporciona todos los servicios backend que necesitas para tu aplicación: base de datos PostgreSQL, autenticación, almacenamiento de archivos, funciones edge y más.

10xDev incluye integración nativa con Supabase para que puedas construir aplicaciones con backend completo en tiempo récord.

## Configuración Inicial

### 1 Crear un proyecto en Supabase

Lo primero que necesitas es un proyecto en Supabase:

1. Regístrate o inicia sesión en [Supabase](https://app.supabase.com)
2. Crea un nuevo proyecto
3. Toma nota de tu URL y la llave anónima (anon key)

### 2 Configurar variables de entorno

En tu proyecto 10xDev, crea o modifica el archivo `.env.local` para añadir las credenciales de Supabase:

```
NEXT_PUBLIC_SUPABASE_URL=https://tu-proyecto.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu-clave-anon
SUPABASE_SERVICE_KEY=tu-clave-de-servicio
```

La `SUPABASE_SERVICE_KEY` es opcional y sólo se recomienda para operaciones del lado del servidor que requieran permisos elevados.

## Autenticación con Supabase

10xDev integra perfectamente el sistema de autenticación de Supabase.

### Configuración básica

```tsx
// En tu componente de autenticación
import { Auth } from "@/blocks/auth/Auth";

export default function LoginPage() {
  return (
    <Auth 
      title="Iniciar sesión" 
      providers={["email", "google", "github"]}
      redirectAfterLogin="/dashboard"
    />
  );
}
```

El bloque `Auth` de 10xDev se encarga de toda la lógica de inicio de sesión, registro, verificación de email y recuperación de contraseña.

### Uso manual del servicio de autenticación

Si necesitas más control, puedes usar directamente el servicio de autenticación:

```tsx
import { authClientService } from "@/services/client/authClientService";

// Iniciar sesión con email y contraseña
const { data, error } = await authClientService.signInWithEmail({
  email: "usuario@ejemplo.com",
  password: "contraseña-segura"
});

// Obtener el usuario actual
const { user } = await authClientService.getUser();

// Cerrar sesión
await authClientService.signOut();
```

### Protección de rutas

Puedes proteger fácilmente tus rutas con el middleware incluido:

```tsx
// En pages/dashboard.tsx
import { DashboardBlock } from "@/blocks/dashboard/Dashboard";
import { requireAuth } from "@/lib/auth";

export default function DashboardPage() {
  return <DashboardBlock />;
}

// Esta función se ejecutará en el servidor antes de renderizar la página
export const getServerSideProps = requireAuth;
```

## Base de Datos PostgreSQL

Supabase te proporciona una base de datos PostgreSQL completamente gestionada. 10xDev incluye servicios para interactuar con ella.

### Configuración de tablas

Recomendamos crear las tablas desde el panel de Supabase o usando migraciones SQL. Ejemplo de una tabla de `products`:

```sql
create table public.products (
  id uuid primary key default uuid_generate_v4(),
  name text not null,
  description text,
  price numeric(10,2) not null,
  image_url text,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now(),
  user_id uuid references auth.users(id)
);

-- Políticas RLS (Row Level Security) para proteger datos
alter table public.products enable row level security;

create policy "Users can view all products" 
  on products for select 
  using (true);

create policy "Users can insert their own products" 
  on products for insert 
  with check (auth.uid() = user_id);

create policy "Users can update their own products" 
  on products for update 
  using (auth.uid() = user_id);
```

### Consultas desde el cliente

Para realizar consultas desde el cliente, utiliza el servicio `supabaseQueries`:

```tsx
import { supabaseQueries } from "@/services/client/supabaseQueries";

// Obtener todos los productos
const { data: products, error } = await supabaseQueries.from("products").select("*");

// Obtener un producto específico
const { data: product } = await supabaseQueries
  .from("products")
  .select("*")
  .eq("id", productId)
  .single();

// Insertar un nuevo producto
const { data, error } = await supabaseQueries
  .from("products")
  .insert({
    name: "Nuevo Producto",
    description: "Descripción del producto",
    price: 99.99,
    user_id: userId
  })
  .select();

// Actualizar un producto
await supabaseQueries
  .from("products")
  .update({ price: 129.99 })
  .eq("id", productId);

// Eliminar un producto
await supabaseQueries
  .from("products")
  .delete()
  .eq("id", productId);
```

### Consultas desde el servidor

Para operaciones del lado del servidor con mayor seguridad:

```tsx
import { supabaseAdmin } from "@/lib/supabase-admin";

// API route ejemplo
export default async function handler(req, res) {
  // Esto usa la clave de servicio para operaciones admin
  const { data, error } = await supabaseAdmin
    .from("products")
    .select("*")
    .order("created_at", { ascending: false });
    
  if (error) {
    return res.status(500).json({ error: error.message });
  }
  
  return res.status(200).json({ products: data });
}
```

## Almacenamiento de Archivos

Supabase ofrece almacenamiento de archivos con control de acceso y transformaciones de imágenes.

### Configuración de buckets

Desde el panel de Supabase, crea buckets según tus necesidades:

- `public`: para archivos accesibles públicamente
- `private`: para archivos que requieren autenticación
- `protected`: para archivos con políticas personalizadas

### Subida de archivos

```tsx
import { storageClientService } from "@/services/client/storageClientService";

// Ejemplo de componente para subir imágenes
function ImageUploader() {
  const handleUpload = async (file) => {
    const filePath = `product-images/${Date.now()}-${file.name}`;
    
    const { data, error } = await storageClientService.uploadFile(
      "public",
      filePath,
      file
    );
    
    if (data) {
      // Construir URL pública del archivo
      const fileUrl = storageClientService.getPublicUrl("public", filePath);
      console.log("Archivo subido:", fileUrl);
    }
  };
  
  return (
    <input 
      type="file" 
      accept="image/*" 
      onChange={(e) => handleUpload(e.target.files[0])} 
    />
  );
}
```

### Acceder a archivos privados

```tsx
// Obtener URL firmada para un archivo privado (expira en 60 min)
const { data } = await storageClientService.getSignedUrl(
  "private",
  "user-files/confidential.pdf",
  60 * 60
);

if (data) {
  const { signedUrl } = data;
  // Usar signedUrl para acceder al archivo
}
```

## Suscripciones en Tiempo Real

Supabase admite suscripciones en tiempo real basadas en PostgreSQL.

```tsx
import { useEffect, useState } from "react";
import { supabaseClient } from "@/lib/supabase-client";

function RealtimeProducts() {
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    // Cargar productos iniciales
    const fetchProducts = async () => {
      const { data } = await supabaseClient
        .from("products")
        .select("*")
        .order("created_at", { ascending: false });
        
      if (data) setProducts(data);
    };
    
    fetchProducts();
    
    // Suscribirse a cambios
    const subscription = supabaseClient
      .channel("products-changes")
      .on(
        "postgres_changes",
        { event: "*", schema: "public", table: "products" },
        (payload) => {
          // Manejar diferentes eventos
          if (payload.eventType === "INSERT") {
            setProducts((prev) => [payload.new, ...prev]);
          } else if (payload.eventType === "UPDATE") {
            setProducts((prev) => 
              prev.map((item) => item.id === payload.new.id ? payload.new : item)
            );
          } else if (payload.eventType === "DELETE") {
            setProducts((prev) => 
              prev.filter((item) => item.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();
    
    // Limpiar suscripción
    return () => {
      subscription.unsubscribe();
    };
  }, []);
  
  return (
    <div>
      <h2>Productos (Tiempo Real)</h2>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}
```

## Edge Functions

Supabase permite crear funciones serverless que se ejecutan en el edge.

### Crear una Edge Function

Desde la interfaz de Supabase, puedes crear una Edge Function. Ejemplo de función para procesar pagos:

```typescript
// supabase/functions/process-payment/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.5.0";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

serve(async (req) => {
  // Manejar preflight OPTIONS
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }
  
  try {
    const { amount, productId, customerId } = await req.json();
    
    // Crear cliente Supabase con clave de servicio
    const supabaseAdmin = createClient(
      Deno.env.get("SUPABASE_URL") ?? "",
      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? ""
    );
    
    // Aquí procesarías el pago con Stripe u otro servicio
    
    // Registrar la transacción
    const { data, error } = await supabaseAdmin
      .from("transactions")
      .insert({
        amount,
        product_id: productId,
        customer_id: customerId,
        status: "completed"
      })
      .select()
      .single();
      
    if (error) throw error;
    
    return new Response(
      JSON.stringify({ success: true, transaction: data }),
      { 
        headers: { ...corsHeaders, "Content-Type": "application/json" },
        status: 200 
      }
    );
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { 
        headers: { ...corsHeaders, "Content-Type": "application/json" },
        status: 400 
      }
    );
  }
});
```

### Llamar a la Edge Function

Desde tu aplicación:

```tsx
const processPayment = async (paymentDetails) => {
  const { data, error } = await supabaseClient.functions.invoke(
    "process-payment",
    {
      body: {
        amount: paymentDetails.amount,
        productId: paymentDetails.productId,
        customerId: paymentDetails.customerId
      }
    }
  );
  
  if (error) {
    console.error("Error al procesar el pago:", error);
    return null;
  }
  
  return data;
};
```

## Webhooks

Supabase también proporciona webhooks para integrarse con servicios externos.

### Ejemplo: Webhook de Stripe

1. Configura un webhook en Stripe para enviar eventos a tu endpoint de Supabase
2. Crea una Edge Function que procese esos eventos

```typescript
// supabase/functions/stripe-webhook/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.5.0";
import Stripe from "https://esm.sh/stripe@11.1.0?target=deno";

const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY"), {
  apiVersion: "2023-08-16",
});

serve(async (req) => {
  const signature = req.headers.get("stripe-signature");
  const body = await req.text();
  
  try {
    // Verificar firma del webhook de Stripe
    const event = stripe.webhooks.constructEvent(
      body,
      signature,
      Deno.env.get("STRIPE_WEBHOOK_SECRET")
    );
    
    const supabaseAdmin = createClient(
      Deno.env.get("SUPABASE_URL") ?? "",
      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? ""
    );
    
    // Manejar eventos de Stripe
    switch (event.type) {
      case "checkout.session.completed": {
        const session = event.data.object;
        
        // Actualizar estado de suscripción
        await supabaseAdmin
          .from("subscriptions")
          .update({ 
            status: "active",
            stripe_checkout_id: session.id,
            updated_at: new Date().toISOString()
          })
          .eq("id", session.client_reference_id);
          
        break;
      }
      
      case "customer.subscription.updated": {
        const subscription = event.data.object;
        
        await supabaseAdmin
          .from("subscriptions")
          .update({ 
            status: subscription.status,
            updated_at: new Date().toISOString()
          })
          .eq("stripe_subscription_id", subscription.id);
          
        break;
      }
      
      // Maneja otros tipos de eventos...
    }
    
    return new Response(JSON.stringify({ received: true }), {
      headers: { "Content-Type": "application/json" },
      status: 200,
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), {
      headers: { "Content-Type": "application/json" },
      status: 400,
    });
  }
});
```

## Migraciones y Gestión de Esquema

Para proyectos más grandes, recomendamos usar la CLI de Supabase para gestionar migraciones:

```bash
# Instalar CLI de Supabase
npm install -g supabase

# Inicializar Supabase en tu proyecto
supabase init

# Crear nueva migración
supabase migration new create_products_table

# Esto crea un archivo SQL en /supabase/migrations que puedes editar
```

En el archivo de migración generado:

```sql
-- Ejemplo de migración para crear una tabla
create table public.products (
  id uuid primary key default uuid_generate_v4(),
  name text not null,
  description text,
  price numeric(10,2) not null,
  image_url text,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now(),
  user_id uuid references auth.users(id)
);

-- Añadir políticas RLS
alter table public.products enable row level security;

create policy "Users can view all products" 
  on products for select 
  using (true);

create policy "Users can insert their own products" 
  on products for insert 
  with check (auth.uid() = user_id);
```

Para aplicar las migraciones:

```bash
# Ejecutar migraciones localmente (desarrollo)
supabase db reset

# Para producción, usa la consola de Supabase o la CLI con autenticación
```

## Consideraciones de Producción

Al llevar tu aplicación a producción, considera:

1 **Restricciones RLS**: Asegúrate de que todas las tablas tengan políticas de seguridad adecuadas
2 **Claves API**: Nunca expongas la clave de servicio en el cliente
3 **Rendimiento**: Usa índices para consultas frecuentes
4 **Costos**: Monitorea el uso de almacenamiento y funciones edge para evitar sorpresas

## Recursos Adicionales

- [Documentación oficial de Supabase](https://supabase.com/docs)
- [Repositorio de ejemplos 10xDev + Supabase](https://github.com/10xdev/supabase-examples)
- [Plantilla SaaS con Supabase](/docs/templates/saas-starter)

Con esta integración, tienes todo lo que necesitas para crear aplicaciones web completas con autenticación, base de datos y almacenamiento en tiempo récord. 

Guía completa para integrar Supabase como backend en tu aplicación 10xDev

Integración con Supabase


Esta documentación describe la forma más óptima de integrar la fuente Poppins en
una aplicación de Next.js 15 utilizando el Page Router y Tailwind CSS,
priorizando el rendimiento y la optimización.

## Método 1: Usando next/font (Recomendado para Optimización)

Next.js tiene una forma optimizada de cargar fuentes web que mejora el
rendimiento al evitar el bloqueo de renderizado y optimizar la carga de los
archivos de fuente.`next/font` es la forma moderna y recomendada.

### Instala next/font:
   ```bash
   npm install next/font
   # o
   yarn add next/font
   # o
   pnpm add next/font
   ```

### Importa y configura la fuente en un componente (generalmente `layout.js` o
   `_app.js`):

   En tu archivo `pages/_app.js` (si tienes uno personalizado) o en el
   `layout.js` dentro de tu directorio `pages`, importa la función `Poppins`
   desde `@next/font` y configúrala:

   ```javascript
   // pages/_app.js
   import { Poppins } from "next/font/google";
   import "../styles/globals.css"; // Asegúrate de tener tu archivo global de estilos

   const poppins = Poppins({
     subsets: ["latin"], // Especifica los subconjuntos de caracteres que necesitas
     weight: ["400", "500", "600", "700"], // Especifica los pesos que vas a usar
     variable: "--font-poppins", // Define una variable CSS para usar en Tailwind
   });

   function MyApp({ Component, pageProps }) {
     return (
       <main className={`${poppins.variable} font-sans`}>
         <Component {...pageProps} />
       </main>
     );
   }

   export default MyApp;
   ```

   O si estás usando un `layout.js` dentro de una carpeta para layouts
   específicos:

   ```javascript
   // pages/layout.js
   import { Poppins } from "@next/font/google";
   import "./globals.css"; // Asegúrate de tener tu archivo global de estilos

   const poppins = Poppins({
     subsets: ["latin"],
     weight: ["400", "500", "600", "700"],
     variable: "--font-poppins",
   });

   export default function RootLayout({ children }) {
     return (
       <html lang="es">
         <body className={`${poppins.variable} font-sans`}>{children}</body>
       </html>
     );
   }
   ```

### Configura Tailwind CSS para usar la variable de fuente:

   Edita tu archivo `tailwind.config.js` para extender la configuración de
   fuentes:

   ```javascript
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
       "./pages/**/*.{js,ts,jsx,tsx,mdx}",
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {
       extend: {
         fontFamily: {
           sans: [
             "var(--font-poppins)",
             ...require("tailwindcss/defaultTheme").fontFamily.sans,
           ],
           poppins: ["var(--font-poppins)"], // Opcional: para usar 'font-poppins' directamente
         },
       },
     },
     plugins: [],
   };
   ```

### Usa la fuente en tus componentes:

   ```jsx
   <h1 className="text-2xl font-bold font-poppins">Título con Poppins</h1>
   <p className="font-sans">Este texto usará la fuente sans-serif configurada (Poppins como fallback).</p>
   ```

### Ventajas de usar `@next/font`:

- **Optimización automática:** Next.js optimiza la carga de la fuente,
  incluyendo la inserción de los estilos críticos en el `<head>` para evitar el
  Flash of Unstyled Text (FOUT).
- **Rendimiento mejorado:** Carga asíncrona de las fuentes no críticas.
- **Soporte para Google Fonts y fuentes locales:** Facilita la carga de ambas.
- **Variables CSS:** Permite una integración sencilla con Tailwind CSS.

---

## Alternativa: Usando Archivos de Fuente Locales (WOFF2)

Esta alternativa implica descargar los archivos de fuente Poppins en formato
WOFF2 y servirlos localmente.El formato WOFF2 ofrece una excelente compresión y
compatibilidad con navegadores modernos, lo que puede resultar en tiempos de
carga ligeramente más rápidos en comparación con otros formatos si se configura
correctamente.

### Descarga los archivos WOFF2 de Poppins:

Puedes obtener los archivos WOFF2 de Poppins desde diversas fuentes, como
[Google Fonts](https://fonts.google.com/) (descargando el paquete y
extrayendo los archivos WOFF2) o a través de otras plataformas de fuentes.
   Asegúrate de descargar los pesos que necesitas (400, 500, 600, 700 en nuestro
   ejemplo).

### Crea un directorio para tus fuentes locales:

En la raíz de tu proyecto Next.js, crea un directorio llamado `public/fonts` (o
el nombre que prefieras).Coloca los archivos `.woff2` de Poppins dentro de este
directorio.Por ejemplo:
   ```
   public/fonts/
   ├── Poppins-Regular.woff2
   ├── Poppins-Medium.woff2
   ├── Poppins-SemiBold.woff2
   └── Poppins-Bold.woff2
   ```

### Define una `@font-face` en tu archivo de estilos global (`globals.css`):

   Abre tu archivo `styles/globals.css` (o el archivo donde tengas tus estilos
   globales) y define las reglas `@font-face` para cada peso de Poppins:

   ```css
   /* styles/globals.css */
   @import "tailwindcss/base";
   @import "tailwindcss/components";
   @import "tailwindcss/utilities";

   @font-face {
     font-family: "Poppins";
     src: url("/fonts/Poppins-Regular.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
     font-display: swap; /* Recomendado para evitar FOUT */
   }

   @font-face {
     font-family: "Poppins";
     src: url("/fonts/Poppins-Medium.woff2") format("woff2");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: "Poppins";
     src: url("/fonts/Poppins-SemiBold.woff2") format("woff2");
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: "Poppins";
     src: url("/fonts/Poppins-Bold.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
   ```

   Asegúrate de que la ruta en `url()` sea correcta según la ubicación de tus
   archivos WOFF2 en el directorio `public`.`font-display: swap;` es crucial
   para indicar al navegador que muestre el texto con una fuente de respaldo
   mientras se carga la fuente Poppins, evitando el FOUT.

### Configura Tailwind CSS para usar la fuente local:

   Edita tu archivo `tailwind.config.js` para extender la configuración de
   fuentes:

   ```javascript
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
       "./pages/**/*.{js,ts,jsx,tsx,mdx}",
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {
       extend: {
         fontFamily: {
           sans: [
             "Poppins",
             ...require("tailwindcss/defaultTheme").fontFamily.sans,
           ],
           poppins: ["Poppins"], // Opcional: para usar 'font-poppins' directamente
         },
       },
     },
     plugins: [],
   };
   ```

### Usa la fuente en tus componentes:

   ```jsx
   <h1 className="text-2xl font-bold font-poppins">Título con Poppins</h1>
   <p className="font-sans">Este texto usará la fuente sans-serif configurada (Poppins como fallback).</p>
   ```

### Ventajas de usar archivos de fuente locales (WOFF2):

- **Control total sobre los archivos de fuente:** No dependes de un servicio
  externo como Google Fonts.
- **Potencialmente menor tiempo de carga:** Al estar alojados en el mismo
  servidor que tu aplicación, se eliminan las búsquedas de DNS y las conexiones
  a servidores externos.El formato WOFF2 es altamente eficiente.
- **Mayor privacidad:** No se envían solicitudes a servidores de terceros para
  obtener las fuentes.

### Consideraciones al usar archivos de fuente locales:

- **Gestión de archivos:** Debes asegurarte de que los archivos de fuente estén
  correctamente incluidos en tu proyecto y desplegados.
- **Actualizaciones:** Si la fuente Poppins se actualiza, deberás descargar
  manualmente las nuevas versiones y reemplazarlas en tu proyecto.
- **Soporte de navegadores:** Aunque WOFF2 tiene un excelente soporte moderno,
  asegúrate de considerar si necesitas formatos de respaldo para navegadores más
  antiguos (aunque esto es menos común en aplicaciones modernas).

### Sobre la alternativa con WOFF2:

Utilizar archivos de fuente locales en formato WOFF2 es una alternativa viable y
a menudo beneficiosa en términos de rendimiento y control.Sin embargo, la
gestión de los archivos y las posibles actualizaciones recaen en el
desarrollador.

Si buscas la máxima optimización sin la gestión manual de archivos, `@next/font`
sigue siendo la opción más integrada y recomendada dentro del ecosistema de
Next.js.Ambas opciones, cuando se configuran correctamente, son superiores a la
importación directa desde Google Fonts en términos de rendimiento inicial.


Métodos para integrar y optimizar la fuente Poppins en aplicaciones Next.js con Page Router y Tailwind CSS, mejorando el rendimiento y la experiencia visual.

Integración de Fuentes Optimizadas en Next.js


<Card
  title="Integraciones Disponibles"
  description="Conecta tu aplicación con servicios de primera clase"
  icon="Zap"
>
  Descubre cómo integrar servicios esenciales para potenciar tu aplicación Next.js con funcionalidades avanzadas.
</Card>

## Integraciones Principales

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/payments" className="block">
      <h3 className="text-lg font-semibold mb-2">💳 Pagos</h3>
      <p className="text-sm text-muted-foreground">Integra Stripe para procesar pagos de forma segura.</p>
      <div className="flex gap-2 mt-2">
        <Badge>Stripe</Badge>
        <Badge>Pagos</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/email" className="block">
      <h3 className="text-lg font-semibold mb-2">📧 Email</h3>
      <p className="text-sm text-muted-foreground">Envía correos transaccionales con Resend.</p>
      <div className="flex gap-2 mt-2">
        <Badge>Resend</Badge>
        <Badge>Email</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/database" className="block">
      <h3 className="text-lg font-semibold mb-2">🗄️ Base de Datos</h3>
      <p className="text-sm text-muted-foreground">Gestiona datos con Supabase.</p>
      <div className="flex gap-2 mt-2">
        <Badge>Supabase</Badge>
        <Badge>Database</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/auth" className="block">
      <h3 className="text-lg font-semibold mb-2">🔐 Autenticación</h3>
      <p className="text-sm text-muted-foreground">Implementa OAuth para autenticación segura.</p>
      <div className="flex gap-2 mt-2">
        <Badge>OAuth</Badge>
        <Badge>Auth</Badge>
      </div>
    </a>
  </Card>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/ai" className="block">
      <h3 className="text-lg font-semibold mb-2">🤖 IA</h3>
      <p className="text-sm text-muted-foreground">Integra OpenAI para funcionalidades de IA.</p>
      <div className="flex gap-2 mt-2">
        <Badge>OpenAI</Badge>
        <Badge>AI</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/storage" className="block">
      <h3 className="text-lg font-semibold mb-2">☁️ Almacenamiento</h3>
      <p className="text-sm text-muted-foreground">Gestiona archivos con Cloudinary.</p>
      <div className="flex gap-2 mt-2">
        <Badge>Cloudinary</Badge>
        <Badge>Storage</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/analytics" className="block">
      <h3 className="text-lg font-semibold mb-2">📊 Analytics</h3>
      <p className="text-sm text-muted-foreground">Analiza el comportamiento de usuarios.</p>
      <div className="flex gap-2 mt-2">
        <Badge>Google Analytics</Badge>
        <Badge>Analytics</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/integrations/seo" className="block">
      <h3 className="text-lg font-semibold mb-2">🔍 SEO</h3>
      <p className="text-sm text-muted-foreground">Optimiza tu aplicación para buscadores.</p>
      <div className="flex gap-2 mt-2">
        <Badge>SEO</Badge>
        <Badge>Optimización</Badge>
      </div>
    </a>
  </Card>
</div>

## Configuración Inicial

Para comenzar a utilizar cualquiera de nuestras integraciones, asegúrate de tener configurado tu proyecto Next.js con TypeScript:

```bash
pnpm create next-app my-app --typescript
cd my-app
```

### Variables de Entorno

Crea un archivo `.env.local` en la raíz de tu proyecto:

```bash
touch .env.local
```

Este archivo contendrá las claves API y configuraciones necesarias para cada integración.

## Mejores Prácticas

<div className="space-y-4 my-8">
  <Card>
    <h4 className="font-medium mb-2">🔐 Seguridad</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Nunca expongas claves API en el cliente</li>
      <li>Utiliza variables de entorno para configuraciones sensibles</li>
      <li>Implementa validación de entrada en todas las APIs</li>
      <li>Mantén actualizadas las dependencias</li>
    </ul>
  </Card>

  <Card>
    <h4 className="font-medium mb-2">⚡ Rendimiento</h4>
    <ul className="list-disc pl-4 space-y-2 text-sm text-muted-foreground">
      <li>Implementa caching cuando sea posible</li>
      <li>Utiliza lazy loading para componentes pesados</li>
      <li>Optimiza las llamadas a APIs externas</li>
      <li>Monitorea el rendimiento regularmente</li>
    </ul>
  </Card>
</div>

## Soporte y Recursos

<div className="space-y-4 my-8">
  <Card className="hover:border-primary/50">
    <a href="/docs/support" className="block">
      <h4 className="font-medium text-foreground">Centro de Ayuda</h4>
      <p className="text-sm text-muted-foreground">Obtén ayuda con tus integraciones</p>
    </a>
  </Card>

  <Card className="hover:border-primary/50">
    <a href="/docs/examples" className="block">
      <h4 className="font-medium text-foreground">Ejemplos</h4>
      <p className="text-sm text-muted-foreground">Explora implementaciones de ejemplo</p>
    </a>
  </Card>
</div>

<Callout type="info" title="¿Necesitas ayuda?">
  Si tienes preguntas sobre alguna integración específica, no dudes en:
  
  - Consultar la documentación detallada de cada integración
  - Unirte a nuestra comunidad de Discord
  - Abrir un issue en GitHub
</Callout> 

Guía completa de integraciones disponibles para tu aplicación Next.js

Integraciones


10xDev es una plataforma completa diseñada para desarrolladores, emprendedores y fundadores de SaaS que buscan optimizar su flujo de trabajo y lanzar productos de calidad más rápidamente. Nuestra misión es simple pero ambiciosa: **multiplicar tu productividad como desarrollador**.

## ¿Qué es 10xDev?

10xDev reúne herramientas, templates, bloques de UI y boilerplates cuidadosamente diseñados para resolver los retos más comunes del desarrollo web moderno. En lugar de reinventar la rueda en cada proyecto, puedes aprovechar componentes probados y patrones establecidos que funcionan.

El nombre "10xDev" hace referencia al concepto de "desarrollador 10x" - aquellos profesionales que pueden ser hasta diez veces más productivos que sus pares. Nuestra plataforma te brinda las herramientas para alcanzar ese nivel de eficiencia.

## Principales características

### Bloques UI

Componentes y secciones completas listas para usar en tus aplicaciones:

- **Dashboards**: Paneles de control con widgets configurables
- **Autenticación**: Sistemas completos de registro, login y gestión de usuarios
- **Landing Pages**: Secciones de marketing optimizadas para conversión
- **E-commerce**: Componentes para tiendas en línea
- **Y mucho más**: Formularios, tablas, gráficos y más

### Templates y Boilerplates

Aplicaciones completas que puedes utilizar como punto de partida:

- **SaaS Starter**: Todo lo necesario para lanzar tu aplicación SaaS
- **E-commerce Pack**: Tienda en línea con gestión de productos y pagos
- **Portfolio Pro**: Showcase personalizable para creativos
- **Blog Engine**: Sistema de blog completo y SEO-friendly

### Sistema de Temas

Un sistema de diseño avanzado que asegura consistencia visual:

- **20+ temas preconfigurados**: Desde minimalistas hasta vibrantes
- **Personalización sencilla**: Adapta colores, tipografías y más
- **Compatibilidad con modo oscuro**: Implementado de forma nativa
- **Componentes accesibles**: Siguiendo las mejores prácticas WCAG

### Herramientas de Desarrollo

Utilidades que mejoran tu experiencia como desarrollador:

- **CLI de 10xDev**: Automatiza tareas comunes desde la línea de comandos
- **DevTools**: Extensiones para depuración y desarrollo más eficiente
- **Generadores de código**: Crea componentes, páginas y más con un solo comando

## Tecnologías soportadas

10xDev es compatible con las tecnologías web modernas más populares:

- **React**: Todos nuestros componentes están creados con React y TypeScript
- **Next.js**: Optimizado para el framework Next.js (Pages Router y App Router)
- **Tailwind CSS**: Sistema de diseño basado en Tailwind para máxima flexibilidad
- **TypeScript**: Tipado estático para código más robusto
- **Integración con servicios**: Auth.js, Supabase, Stripe, y más

## Filosofía de desarrollo

En 10xDev creemos en ciertos principios fundamentales:

- **Código de calidad**: TypeScript, testing y mejores prácticas en todo momento
- **Enfoque en UX**: Experiencias de usuario fluidas y agradables
- **Accesibilidad**: Productos utilizables por todos los usuarios
- **Rendimiento**: Optimización para velocidad y eficiencia
- **Mantenibilidad**: Código limpio y bien documentado

## Primeros pasos

Para comenzar a usar 10xDev, te recomendamos seguir estos pasos:

1. [Instalación](/docs/getting-started/installation): Configura 10xDev en tu entorno
2. [Configuración inicial](/docs/getting-started/configuration): Personaliza tus primeros ajustes
3. [Tu primer proyecto](/docs/getting-started/first-project): Crea una aplicación sencilla

## Comunidad

10xDev es más que una colección de herramientas; somos una comunidad de desarrolladores comprometidos con la mejora continua:

- **Código abierto**: Muchos de nuestros componentes son de código abierto
- **Contribuciones**: Aceptamos y valoramos las contribuciones de la comunidad
- **Foro y Discord**: Espacios para preguntas, respuestas y networking

## ¿Para quién es 10xDev?

10xDev es ideal para:

- **Desarrolladores individuales** que quieren maximizar su productividad
- **Equipos de producto** que necesitan lanzar MVPs rápidamente
- **Agencias** que buscan entregar proyectos de calidad en menos tiempo
- **Startups** con recursos limitados que quieren competir con empresas más grandes
- **Emprendedores técnicos** que construyen productos SaaS

## Conclusión

10xDev es tu aliado para construir aplicaciones web modernas de forma más rápida y eficiente. Al proporcionarte componentes, templates y herramientas probadas, puedes enfocarte en lo que realmente importa: crear valor único para tus usuarios finales.

Explora nuestra documentación para descubrir todo lo que 10xDev puede hacer por ti, o [contacta con nosotros](/contact) si tienes alguna pregunta. 

Descubre cómo 10xDev puede potenciar tu desarrollo web y convertirte en un desarrollador más productivo

Introducción a 10xDev


Los Bloques UI son componentes reutilizables y preconfigurados que te permiten
implementar funcionalidades completas en tu aplicación con un mínimo esfuerzo.
Desde dashboards hasta sistemas de autenticación, estos bloques aceleran
dramáticamente tu desarrollo.

## ¿Qué son los Bloques UI?

Los bloques son componentes de React completamente funcionales y estilizados que
implementan patrones de interfaz comunes en aplicaciones web modernas. Cada
bloque está:

- **Completamente tipado** con TypeScript
- **Estilizado** con Tailwind CSS y compatible con nuestro sistema de temas
- **Responsivo** para todos los tamaños de pantalla
- **Accesible** siguiendo las mejores prácticas de WCAG
- **Modular** para ser fácilmente adaptable a tus necesidades

## Cómo utilizar los Bloques

Puedes utilizar cualquier bloque de nuestra librería importándolo directamente
desde el directorio `@/blocks`:

```tsx
import { Dashboard } from "@/blocks/dashboard/Dashboard";

export default function MiPagina() {
  return <Dashboard />;
}
```

Los bloques pueden utilizarse tal como están o personalizarse según tus
necesidades:

```tsx
import { Auth } from "@/blocks/auth/Auth";

export default function MiPaginaDeAcceso() {
  return (
    <Auth
      title="Acceso a Mi Aplicación"
      providers={["google", "github"]}
      redirectAfterLogin="/dashboard"
      onAuthSuccess={(user) => {
        // Lógica personalizada después del inicio de sesión
        console.log("Usuario autenticado:", user);
      }}
    />
  );
}
```

## Estructura de un Bloque

Cada bloque sigue una estructura similar que facilita su uso y personalización:

```
blocks/
├── nombreDelBloque/
│   ├── NombreDelBloque.tsx      # Componente principal exportado
│   ├── components/              # Componentes internos utilizados por el bloque
│   │   ├── ComponenteInterno1.tsx
│   │   └── ComponenteInterno2.tsx
│   ├── hooks/                   # Hooks específicos del bloque
│   │   ├── useEstadoDelBloque.ts
│   │   └── useComportamientoDelBloque.ts
│   ├── types.ts                 # Tipos e interfaces específicas
│   └── utils.ts                 # Utilidades y funciones auxiliares
```

## Lista de Bloques Disponibles

Aquí tienes una lista de los bloques disponibles en 10xDev:

| Bloque    | Descripción                                | Ruta                           |
| --------- | ------------------------------------------ | ------------------------------ |
| Dashboard | Panel de control con widgets configurables | `@/blocks/dashboard/Dashboard` |
| Auth      | Sistema completo de autenticación          | `@/blocks/auth/Auth`           |
| Blog      | Listado de artículos con filtros           | `@/blocks/blog/Blog`           |
| Calendar  | Calendario interactivo para eventos        | `@/blocks/calendar/Calendar`   |
| Chat      | Interfaz de chat en tiempo real            | `@/blocks/chat/Chat`           |
| Pricing   | Planes de precios con opciones             | `@/blocks/pricing/Pricing`     |
| Profile   | Página de perfil de usuario                | `@/blocks/profile/Profile`     |
| Settings  | Configuración y preferencias               | `@/blocks/settings/Settings`   |
| Landing   | Página de aterrizaje                       | `@/blocks/landing/Landing`     |

## Personalización de Bloques

Todos los bloques aceptan props para su personalización. Para ver las opciones
disponibles de cada bloque, revisa su documentación específica o examina los
tipos en el archivo `types.ts` de cada bloque.

```tsx
// Ejemplo de personalización avanzada
import { Dashboard } from "@/blocks/dashboard/Dashboard";
import { Widget1 } from "@/components/widgets/Widget1";
import { Widget2 } from "@/components/widgets/Widget2";

export default function DashboardPersonalizado() {
  return (
    <Dashboard
      title="Panel de Control"
      description="Bienvenido a tu panel personalizado"
      layout="sidebar"
      widgets={[
        { id: "widget1", component: <Widget1 data={miData} /> },
        { id: "widget2", component: <Widget2 /> },
      ]}
      theme="dark"
    />
  );
}
```

## Mejores Prácticas

Al trabajar con bloques, recomendamos seguir estas prácticas:

1 **Mantén la consistencia**: Utiliza el mismo estilo y tema a través de tu
   aplicación.
2 **Personaliza moderadamente**: Los bloques están diseñados para ser
   utilizados con mínimas modificaciones.
3 **Combina bloques**: Puedes combinar varios bloques para crear interfaces más
   complejas.
4 **Respeta las interfaces**: No modifiques la estructura interna de los
   bloques, utiliza las props disponibles.

## Ejemplo completo

Aquí tienes un ejemplo completo de una aplicación que utiliza múltiples bloques:

```tsx
// pages/index.tsx
import { Landing } from "@/blocks/landing/Landing";

export default function Home() {
  return <Landing />;
}

// pages/dashboard.tsx
import { Dashboard } from "@/blocks/dashboard/Dashboard";
import { requireAuth } from "@/lib/auth";

export default function DashboardPage() {
  return <Dashboard />;
}

// Proteger la ruta
export const getServerSideProps = requireAuth;

// pages/settings.tsx
import { Settings } from "@/blocks/settings/Settings";
import { requireAuth } from "@/lib/auth";

export default function SettingsPage() {
  return <Settings />;
}

// Proteger la ruta
export const getServerSideProps = requireAuth;
```

## Siguiente paso

Explora cada uno de los bloques disponibles para conocer sus capacidades y
opciones de personalización.

- [Dashboard](/docs/blocks/dashboard)
- [Auth](/docs/blocks/auth)
- [Landing Pages](/docs/blocks/landing)


Aprende a utilizar los componentes prefabricados para acelerar tu desarrollo

Introducción a Bloques UI


Las plantillas de email de 10xDev te permiten crear comunicaciones profesionales
con tus usuarios de forma sencilla y eficiente. Estas plantillas están diseñadas
para ser responsivas, personalizables y compatibles con la mayoría de clientes
de correo.

## ¿Por qué usar nuestras plantillas de email?

Los emails son una parte fundamental de cualquier aplicación moderna, ya sea
para verificación de cuentas, notificaciones, marketing o comunicación con tus
usuarios. Nuestras plantillas ofrecen:

- **Diseño responsivo** que se adapta a móviles, tablets y escritorio
- **Estilo coherente** con tu marca y aplicación
- **Compatibilidad** con los principales clientes de correo
- **Personalización** sencilla para adaptar el contenido a tus necesidades
- **Accesibilidad** siguiendo las mejores prácticas para todos los usuarios

## Tipos de Plantillas Disponibles

Ofrecemos plantillas para diferentes propósitos:

| Categoría         | Descripción                                              | Ejemplos                                              |
| ----------------- | -------------------------------------------------------- | ----------------------------------------------------- |
| **Transaccional** | Emails automatizados disparados por acciones del usuario | Confirmación de compra, Recibos, Cambio de contraseña |
| **Marketing**     | Emails promocionales y de engagement                     | Newsletters, Ofertas especiales, Lanzamientos         |
| **Onboarding**    | Emails para nuevos usuarios                              | Bienvenida, Guías iniciales, Verificación             |
| **Notificación**  | Informan sobre eventos o actualizaciones                 | Alertas, Recordatorios, Actualizaciones de estado     |
| **Engagement**    | Fomentan la interacción con la plataforma                | Resúmenes de actividad, Recomendaciones               |

## Cómo Utilizar las Plantillas

### 1 Importar la plantilla

```tsx
import { WelcomeEmail } from "@/email-templates/WelcomeEmail";
```

### 2 Personalizar con props

```tsx
const emailContent = (
  <WelcomeEmail
    userName="María García"
    companyName="Tu Aplicación"
    ctaText="Comenzar ahora"
    ctaUrl="https://tuapp.com/comenzar"
    supportEmail="soporte@tuapp.com"
  />
);
```

### 3 Renderizar a HTML

```tsx
import { renderAsync } from "@react-email/components";

const emailHtml = await renderAsync(emailContent);
```

### 4 Enviar con tu servicio de email preferido

```tsx
import { EmailService } from "@/services/email";

await EmailService.send({
  to: "usuario@ejemplo.com",
  subject: "Bienvenido a Tu Aplicación",
  html: emailHtml,
});
```

## Integración con Servicios de Email

10xDev está diseñado para funcionar con los servicios de email más populares:

### Resend

```tsx
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: "onboarding@tuapp.com",
  to: "usuario@ejemplo.com",
  subject: "Bienvenido a Tu Aplicación",
  react: <WelcomeEmail userName="María García" ... />
});
```

### SendGrid

```tsx
import sgMail from "@sendgrid/mail";

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

await sgMail.send({
  to: "usuario@ejemplo.com",
  from: "soporte@tuapp.com",
  subject: "Bienvenido a Tu Aplicación",
  html: emailHtml,
});
```

### Amazon SES

```tsx
import { SendEmailCommand, SESClient } from "@aws-sdk/client-ses";

const sesClient = new SESClient({ region: "us-east-1" });

const command = new SendEmailCommand({
  Destination: { ToAddresses: ["usuario@ejemplo.com"] },
  Source: "soporte@tuapp.com",
  Message: {
    Subject: { Data: "Bienvenido a Tu Aplicación" },
    Body: { Html: { Data: emailHtml } },
  },
});

await sesClient.send(command);
```

## Plantillas Disponibles

Aquí tienes algunas de las plantillas más utilizadas:

### Transaccionales

- **WelcomeEmail**: Mensaje de bienvenida para nuevos usuarios
- **PasswordReset**: Email para restablecimiento de contraseñas
- **VerificationCode**: Envía un código de verificación
- **ReceiptEmail**: Confirmación de pago con detalles
- **InvoiceEmail**: Factura detallada con líneas de productos

### Marketing

- **NewsletterEmail**: Plantilla para newsletters periódicos
- **PromoEmail**: Promoción de productos o características
- **ProductLaunch**: Anuncio de nuevos productos o servicios
- **EventInvitation**: Invitación a eventos o webinars

### Onboarding

- **GettingStarted**: Guía inicial para nuevos usuarios
- **FeatureHighlight**: Presentación de funcionalidades clave
- **NextSteps**: Sugerencia de acciones para completar perfil

### Soporte

- **SupportTicket**: Confirmación de recepción de ticket
- **SupportResponse**: Respuesta a consulta de soporte
- **AccountSuspended**: Notificación de suspensión de cuenta

## Personalizando el Diseño

Todas las plantillas pueden personalizarse para adaptarse a tu marca:

```tsx
// Componente personalizado
<WelcomeEmail
  // Datos básicos
  userName="María García"
  companyName="Tu Aplicación"
  // Personalización visual
  logo="https://tuapp.com/logo.png"
  primaryColor="#FF5500"
  backgroundColor="#F9F9F9"
  // Contenido
  headline="¡Bienvenido al futuro del desarrollo!"
  bodyText="Estamos emocionados de que te hayas unido a Tu Aplicación. Aquí tienes algunos pasos para comenzar..."
  // Call to Action
  ctaText="Comenzar ahora"
  ctaUrl="https://tuapp.com/comenzar"
  // Información adicional
  footerLinks={[
    { text: "Términos de servicio", url: "https://tuapp.com/terminos" },
    { text: "Política de privacidad", url: "https://tuapp.com/privacidad" },
  ]}
  socialLinks={[
    { platform: "twitter", url: "https://twitter.com/tuapp" },
    { platform: "facebook", url: "https://facebook.com/tuapp" },
  ]}
/>
```

## Mejores Prácticas

Para asegurar que tus emails lleguen correctamente y no sean marcados como spam:

1 **Utiliza un dominio verificado** para el campo "From"
2 **Incluye texto alternativo** para usuarios que no pueden ver imágenes
3 **Mantén un balance adecuado** entre texto e imágenes
4 **Evita palabras que activan filtros antispam** como "gratis", "oferta
limitada", etc.
5 **Proporciona una opción clara para darse de baja** en emails de marketing
6 **Prueba tus emails** en múltiples clientes antes de enviarlos masivamente

## Pruebas y Vista Previa

Puedes previsualizar tus emails antes de enviarlos:

```tsx
import { PreviewEmail } from "@/components/email/PreviewEmail";

// En tu componente
<PreviewEmail template={<WelcomeEmail userName="Usuario Ejemplo" ... />} />
```

Con estas plantillas, podrás implementar rápidamente una estrategia de
comunicación profesional y efectiva para tu aplicación.


Cómo utilizar las plantillas de email responsivas y personalizables para comunicaciones efectivas

Introducción a Plantillas de Email


<Card
  title="🔍 Investigación de Palabras Clave Estratégica con 10xDev"
  description="Descubre y prioriza las palabras clave que impulsarán tu proyecto SaaS o web, con insights prácticos y el poder de la IA de 10xDev."
  icon="Search"
>
  Una investigación de palabras clave (keyword research) efectiva es el cimiento de cualquier estrategia SEO exitosa. Te permite entender qué busca tu audiencia, cómo lo busca y qué lenguaje utiliza. Esta guía te enseñará a identificar y priorizar las keywords más valiosas para tu negocio. Con 10xDev, puedes llevar tu investigación al siguiente nivel utilizando nuestros **prompts de IA especializados** para generar ideas y analizar la intención.
</Card>

## Fundamentos del Keyword Research

Comprender los diferentes tipos de palabras clave y su relación con la intención del usuario es crucial.

### Tipos de Palabras Clave

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🎯 Short-tail (Cola Corta)</h3>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>1-2 palabras (ej. "next js", "saas seo").</li>
      <li>Alto volumen de búsqueda.</li>
      <li>Alta competencia, difíciles de rankear.</li>
      <li>Intención a menudo genérica.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">🔍 Long-tail (Cola Larga)</h3>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>3+ palabras (ej. "cómo optimizar seo para next js app router").</li>
      <li>Menor volumen de búsqueda individual.</li>
      <li>Menor competencia, más fáciles de rankear.</li>
      <li>Intención usualmente más específica y mayor tasa de conversión.</li>
      <li>En conjunto, pueden sumar un gran volumen de tráfico.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-3">💡 LSI (Latent Semantic Indexing) & Semánticas</h3>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Términos y frases conceptualmente relacionados con tu keyword principal.</li>
      <li>Ayudan a los motores de búsqueda a entender el contexto y la profundidad de tu contenido.</li>
      <li>Mejoran la relevancia y evitan el "keyword stuffing".</li>
      <li>Ej: para "Next.js SEO", LSI podrían ser "renderizado SSR", "Core Web Vitals", "metadatos dinámicos".</li>
    </ul>
  </Card>
</div>

<Callout type="info" title="Keywords y el Embudo de Conversión SaaS">
  Para un producto SaaS, es vital mapear tus keywords a las etapas del viaje del cliente:
  - **TOFU (Top of Funnel - Descubrimiento):** Keywords informacionales amplias que abordan problemas o preguntas generales (ej. "mejorar colaboración equipo desarrollo", "qué es serverless"). Atraen a quienes están identificando un problema.
  - **MOFU (Middle of Funnel - Consideración):** Keywords que comparan soluciones o exploran características (ej. "comparativa herramientas gestión proyectos", "alternativas a Jira para startups", "beneficios de Next.js para e-commerce"). Para usuarios evaluando opciones.
  - **BOFU (Bottom of Funnel - Decisión):** Keywords transaccionales, de marca, o muy específicas (ej. "precio 10xDev Pro", "comprar licencia 10xDev", "cómo integrar API de 10xDev"). Para usuarios listos para convertir o tomar una acción.
</Callout>

### Keyword Research para Validación de Ideas en SaaS
La investigación de palabras clave no solo sirve para el SEO, sino que es una herramienta estratégica para fundadores de SaaS en la etapa de validación:

-   **Medir la Demanda del Mercado:** ¿Existe un volumen de búsqueda significativo para los problemas que tu SaaS pretende resolver? Una baja demanda podría indicar un nicho muy pequeño o la necesidad de educar al mercado.
-   **Identificar Nichos y Micro-nichos:** Descubre subconjuntos de problemas o audiencias con búsquedas específicas y, potencialmente, menor competencia.
-   **Refinar tu Propuesta de Valor:** Entiende el lenguaje exacto que usa tu público objetivo para describir sus "puntos de dolor" y aspiraciones. Adapta tu mensaje.
-   **Validar Nombres de Features:** Comprueba si los términos que usas internamente para tus características resuenan con cómo los buscarían los usuarios. ¿Existen sinónimos más populares?
-   **Analizar a la Competencia:** Identifica qué keywords están targeteando tus competidores y dónde podrías encontrar una ventaja.

Usa esta inteligencia para tomar decisiones informadas antes de invertir grandes recursos en desarrollo y marketing.

## Metodología y Herramientas para la Investigación

El proceso de keyword research es iterativo y combina creatividad con análisis de datos.

### Proceso de Investigación de Palabras Clave

1.  **Brainstorming Inicial (Semillas):** Comienza con una lista de temas y términos base directamente relacionados con tu producto, servicio o el problema que resuelves. Piensa como tu cliente ideal.
2.  **Expansión con Herramientas:** Utiliza herramientas de keyword research (ver abajo) para expandir tu lista inicial. Estas herramientas te mostrarán variaciones, preguntas comunes, keywords long-tail y términos LSI.
3.  **Análisis de Métricas:** Para cada keyword potencial, recopila métricas clave:
    * **Volumen de Búsqueda:** Cuántas veces se busca la keyword (generalmente mensual).
    * **Dificultad de Keyword (KD):** Una estimación de qué tan difícil será rankear para esa keyword.
    * **Intención de Búsqueda:** ¿Qué quiere lograr el usuario? (Informacional, Navegacional, Comercial, Transaccional).
    * **CPC (Costo Por Clic):** Estimación de lo que los anunciantes pagan por esa keyword; puede indicar valor comercial.
4.  **Análisis SERP (Página de Resultados del Motor de Búsqueda):** Para tus keywords más prometedoras, analiza manualmente los resultados actuales de Google. ¿Qué tipo de contenido rankea? ¿Cuál es la autoridad de los sitios? ¿Qué intención parece estar satisfaciendo Google?
5.  **Filtrado y Priorización:** No todas las keywords valen lo mismo para tu negocio. Prioriza basándote en:
    * **Relevancia:** ¿Encaja con tus productos/servicios y tu audiencia objetivo?
    * **Volumen:** ¿Suficiente para justificar el esfuerzo?
    * **Dificultad:** ¿Realistamente puedes competir? Busca un balance.
    * **Intención:** ¿Coincide con tus objetivos para la página que optimizarás?
    * **Potencial de Conversión:** ¿Es probable que esta keyword atraiga a usuarios que se convertirán en clientes?
6.  **Agrupación y Mapeo:** Agrupa keywords relacionadas semánticamente y mapea cada grupo a una página específica de tu sitio (existente o por crear).

### Herramientas Recomendadas

#### 🛠️ Herramientas Gratuitas (o con versión gratuita útil)
-   **Google Keyword Planner:** Necesitas una cuenta de Google Ads (no requiere campaña activa). Bueno para descubrir ideas y ver volúmenes aproximados.
-   **Google Trends:** Compara la popularidad relativa de keywords a lo largo del tiempo e identifica tendencias.
-   **AnswerThePublic:** Visualiza preguntas, preposiciones y comparaciones relacionadas con tus keywords. Genial para ideas de contenido.
-   **Consola de Búsqueda de Google (Google Search Console):** Descubre para qué keywords ya estás rankeando (o casi) en la sección de "Rendimiento".
-   **Sugerencias de Google y "Búsquedas relacionadas":** Fuentes directas de ideas al escribir en Google.
-   **Extenciones de Navegador:** Como "Keywords Everywhere" (parcialmente de pago) o "SEO Minion" pueden ofrecer métricas en la SERP.

#### 💼 Herramientas Premium (Suscripción)
-   **Ahrefs:** Plataforma SEO todo-en-uno muy potente para análisis de keywords, competencia, backlinks y auditorías de sitio.
-   **SEMrush:** Similar a Ahrefs, ofrece un conjunto completo de herramientas para marketing digital, incluyendo keyword research.
-   **Moz Pro:** Otra suite SEO establecida con buenas herramientas de investigación de palabras clave y análisis de autoridad de dominio.
-   **KWFinder (de Mangools):** Conocida por su interfaz amigable y métricas de dificultad de keyword precisas, especialmente buena para long-tails.

<Callout type="idea" title="Potencia tu Keyword Research con IA de 10xDev">
¿Atascado en la fase de brainstorming o necesitas refinar tu lista? Nuestros **prompts de IA profesionales en 10xDev** están diseñados para:
- Generar cientos de ideas de palabras clave a partir de un tema semilla.
- Identificar términos LSI y preguntas relacionadas.
- Clasificar keywords por intención de búsqueda o etapa del funnel.
- Incluso ayudarte a redactar meta descripciones atractivas basadas en tus keywords.
¡Explora nuestra biblioteca de prompts y acelera tu investigación!
</Callout>

## Aplicando Keywords en tu Proyecto Next.js

Una vez que tienes tus keywords, necesitas integrarlas estratégicamente.

### Optimización de Metadatos (App Router)
Incluye tus keywords principales y secundarias de forma natural en los metadatos de tus páginas.

```tsx
// app/[locale]/blog/[slug]/page.tsx (Ejemplo para una página de blog dinámica)
import type { Metadata } from 'next';
// Asume una función que obtiene los datos del post, incluyendo título, descripción y keywords predefinidas.
// import { getPostBySlugForLocale } from '@/lib/blog-api';

interface PostPageProps {
  params: {
    slug: string;
    locale: string;
  };
}

export async function generateMetadata(
  { params }: PostPageProps
): Promise<Metadata> {
  const { slug, locale } = params;
  // const post = await getPostBySlugForLocale(slug, locale);
  // if (!post) {
  //   return { title: "Post no encontrado" }; // Manejo si el post no existe
  // }

  // Simulación de datos del post
  const post = {
    title: "Guía Completa de Keyword Research para Next.js en 2025",
    seoDescription: "Aprende a realizar una investigación de palabras clave efectiva para tu aplicación Next.js y mejora tu SEO con esta guía detallada.",
    keywordsArray: ["keyword research", "next.js seo", "seo palabras clave", "optimización next.js"],
    canonicalUrlPath: `/blog/keyword-research-nextjs-2025` // Ruta sin locale si tienes una canónica global
  };
  
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || '[https://www.tu-dominio.com](https://www.tu-dominio.com)';

  return {
    title: post.title, // Ya optimizado con keywords
    description: post.seoDescription, // Optimizado con keywords
    keywords: post.keywordsArray, // Array de strings
    alternates: {
      canonical: `${siteUrl}${post.canonicalUrlPath}`, // URL canónica
      languages: { // Ejemplo de hreflang si tienes múltiples idiomas
        'es-ES': `${siteUrl}/es${post.canonicalUrlPath}`,
        'en-US': `${siteUrl}/en${post.canonicalUrlPath}`,
        'x-default': `${siteUrl}/es${post.canonicalUrlPath}`, // Idioma por defecto
      },
    },
    // ...otros metadatos como openGraph, twitter, etc.
  };
}

// Tu componente de página aquí...
export default async function PostPage({ params }: PostPageProps) {
  // ...lógica para obtener y mostrar el post
  return <article>Contenido del post sobre {params.slug}</article>;
}
```

**Nota:** No olvides configurar `metadataBase` en tu `app/layout.tsx` raíz.

### Implementación de Datos Estructurados (Schema.org)

Incluye keywords relevantes en las descripciones y nombres dentro de tus datos estructurados.

```tsx
// app/components/BlogPostSchemaScript.tsx (Ejemplo)

interface BlogPostSchemaProps {
  post: {
    title: string; // Título optimizado con keyword principal
    description: string; // Descripción optimizada con keywords secundarias
    datePublished: string; // Formato ISO 8601
    dateModified?: string; // Formato ISO 8601
    authorName: string;
    keywords: string[]; // Array de keywords relevantes para el post
    // ...otras propiedades como imagen, publisher, etc.
  };
}

export function BlogPostSchemaScript({ post }: BlogPostSchemaProps) {
  const schema = {
    "@context": "[https://schema.org](https://schema.org)",
    "@type": "BlogPosting", // O "Article", "NewsArticle", etc.
    "headline": post.title,
    "description": post.description,
    "keywords": post.keywords.join(", "), // Las keywords también pueden ir aquí
    "datePublished": post.datePublished,
    "dateModified": post.dateModified || post.datePublished,
    "author": {
      "@type": "Person", // O "Organization"
      "name": post.authorName,
    },
    // "publisher": {
    //   "@type": "Organization",
    //   "name": "Tu Marca",
    //   "logo": {
    //     "@type": "ImageObject",
    //     "url": "[https://www.tu-dominio.com/logo.png](https://www.tu-dominio.com/logo.png)"
    //   }
    // },
    // "image": { // Imagen principal del artículo
    //   "@type": "ImageObject",
    //   "url": "[https://www.tu-dominio.com/imagen-articulo.jpg](https://www.tu-dominio.com/imagen-articulo.jpg)",
    //   "width": 1200,
    //   "height": 675
    // }
  };

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

## Estrategias Avanzadas de Keyword Research

### Análisis de la Competencia

  - **Identifica a tus Principales Competidores SEO:** No necesariamente tus competidores directos de negocio, sino quiénes rankean para las keywords que te interesan.
  - **Analiza sus Keywords:** Usa herramientas (Ahrefs, SEMrush) para ver para qué keywords rankean, su tráfico estimado, y la dificultad de esas keywords.
  - **Estudia su Contenido:** ¿Qué tipo de contenido crean? ¿Qué tan profundo es? ¿Qué ángulos cubren?
  - **Busca "Keyword Gaps":** Palabras clave para las que tus competidores rankean, pero tú no. Podrían ser oportunidades.

### Seguimiento y Optimización Continua

  - **Monitoriza tus Rankings:** Usa Google Search Console y herramientas de seguimiento de rankings para ver cómo evolucionan tus posiciones para las keywords objetivo.
  - **Identifica Oportunidades de "Striking Distance":** Keywords para las que rankeas en la página 2 o 3 de Google. A menudo, un pequeño esfuerzo de optimización on-page o algunos backlinks pueden llevarlas a la página 1.
  - **Refresca y Optimiza Contenido Existente:** Revisa periódicamente tu contenido antiguo. ¿Puedes actualizarlo con nueva información y optimizarlo para keywords adicionales o más relevantes?

## Mejores Prácticas para Organizar tus Keywords

Una vez realizada la investigación, la organización es clave:

### 📂 Agrupación Temática (Topic Clusters)

Agrupa keywords relacionadas semánticamente en "clusters" o temas. Cada cluster se centra en una "pillar page" (página pilar) que cubre el tema principal de forma amplia, y se enlaza a varias sub-páginas o artículos (cluster content) que profundizan en keywords long-tail más específicas dentro de ese tema. Esto ayuda a construir autoridad temática y mejora la estructura de enlaces internos.

### 🗺️ Mapeo de Keywords al Viaje del Usuario (Funnel)

Clasifica tus keywords según la etapa del viaje del comprador (TOFU, MOFU, BOFU, como se describió antes). Esto te permite crear contenido específico que responda a las necesidades del usuario en cada fase, guiándolos eficazmente hacia la conversión.

### 📊 Uso de Hojas de Cálculo o Herramientas Especializadas

Utiliza hojas de cálculo (Google Sheets, Excel) o las funcionalidades de gestión de keywords de herramientas SEO premium para mantener un registro detallado:

  - Palabra clave
  - Volumen de búsqueda mensual
  - Dificultad de keyword (KD)
  - Intención de búsqueda
  - CPC estimado
  - Prioridad (alta, media, baja)
  - URL asignada (o "Contenido por crear")
  - Notas adicionales

### 🔄 Revisión y Actualización Periódica

El panorama de búsqueda y las intenciones de los usuarios evolucionan. Revisa y actualiza tu investigación de keywords al menos trimestral o semestralmente. Identifica nuevas oportunidades, elimina keywords obsoletas y ajusta tu estrategia según sea necesario.

## De la Investigación a la Acción: Planifica tu Contenido

Con tu lista de keywords priorizadas y organizadas:

1.  **Mapeo de Keywords a Contenido:** Asigna grupos de keywords (clusters) a páginas existentes que puedas optimizar o a nuevas piezas de contenido que necesites crear.
2.  **Creación de un Calendario Editorial:** Utiliza tus keywords y temas como base para planificar tu producción de contenido. Considera la estacionalidad y las tendencias. (Ver [Guía de Estrategia de Contenido SEO](https://www.google.com/search?q=/docs/seo/content-strategy)).
3.  **Optimización On-Page Continua:** Implementa tus keywords de forma natural en metadatos, encabezados, cuerpo del texto, atributos `alt` de imágenes, etc. (Ver [Guía de SEO On-Page y Contenido](https://www.google.com/search?q=/docs/seo/content)).

<Callout type="success" title="¡Keyword Research Listo para la Acción!">
Una investigación de palabras clave exhaustiva es tu hoja de ruta para el éxito SEO. Úsala para informar tu estrategia de contenido, optimizar tus páginas y, lo más importante, conectar con tu audiencia de la manera más efectiva. Los **prompts de IA de 10xDev** pueden ser un gran aliado en este proceso continuo.
</Callout>

<Callout type="info" title="Próximos Pasos y Recursos Adicionales">

  - Aprende a implementar estas keywords en tu sitio: [Guía de SEO On-Page y Contenido](https://www.google.com/search?q=/docs/seo/content)
  - Desarrolla un plan basado en tus hallazgos: [Estrategia de Contenido SEO Efectiva](https://www.google.com/search?q=/docs/seo/content-strategy)
  - Descubre cómo tus competidores usan las keywords: [se quitó una URL no válida]
</Callout>


Domina la investigación de palabras clave (keyword research) para optimizar el SEO de tu aplicación Next.js, validar ideas y atraer a tu audiencia ideal.

Investigación Estratégica de Palabras Clave para Next.js


<Card
  title="✍️ SEO On-Page y Contenido de Alto Valor con 10xDev"
  description="Aprende a optimizar cada elemento de tus páginas y a crear contenido que rankea y convierte, potenciado por los recursos y la IA de 10xDev."
  icon="FileText"
>
  El SEO On-Page es el arte de optimizar los elementos *dentro* de tus páginas web para mejorar su posicionamiento en los motores de búsqueda y atraer tráfico más relevante. Esto abarca desde los metadatos y la estructura del contenido hasta la calidad y relevancia de lo que escribes. En 10xDev, te ofrecemos **templates con estructuras SEO optimizadas** y **prompts de IA** para ayudarte a crear contenido excepcional.
  Para una base sólida, te recomendamos revisar nuestras guías sobre [Investigación de Palabras Clave](/docs/seo/keywords) y [Estrategia de Contenido](/docs/seo/content-strategy).
</Card>

## Metadatos Esenciales y Estructura Semántica

Los metadatos le dicen a los motores de búsqueda (y a los usuarios en las SERPs) de qué trata tu página. La estructura semántica ayuda a organizar tu contenido de forma lógica.

### Configuración de Metadatos en `layout.tsx` y `page.tsx` (App Router)

Define metadatos base en tu `app/layout.tsx` y personalízalos por página.

```tsx
// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  // metadataBase es crucial para que las URLs relativas en metadatos (ej. openGraph.images)
  // se resuelvan correctamente a URLs absolutas.
  metadataBase: new URL('[https://www.tu-dominio.com](https://www.tu-dominio.com)'), // ¡Reemplaza con tu dominio!
  title: {
    default: 'Tu Marca | Tu Propuesta de Valor Principal', // Título por defecto para todo el sitio
    template: '%s | Tu Marca', // Plantilla para títulos de páginas específicas
  },
  description: 'Descripción concisa y atractiva de tu sitio, optimizada con palabras clave relevantes para tu nicho.',
  keywords: ['palabra clave principal', 'keyword secundaria', 'término relevante', 'tu marca'],
  authors: [{ name: 'El Equipo de Tu Marca', url: '[https://www.tu-dominio.com/nosotros](https://www.tu-dominio.com/nosotros)' }],
  creator: 'Tu Marca Inc.',
  publisher: 'Tu Marca Publicaciones',
  openGraph: { // Para compartir en redes sociales (Facebook, LinkedIn, etc.)
    type: 'website',
    locale: 'es_ES', // Ajusta a tu idioma y región principal
    url: '[https://www.tu-dominio.com](https://www.tu-dominio.com)',
    siteName: 'Tu Marca',
    title: 'Título Atractivo para Redes Sociales | Tu Marca',
    description: 'Descripción persuasiva para redes sociales, invitando al clic.',
    images: [
      {
        url: '/og-image-default.png', // Ruta relativa a `metadataBase` (ej. public/og-image-default.png)
        width: 1200,
        height: 630,
        alt: 'Descripción de la imagen Open Graph por defecto para Tu Marca',
      },
    ],
  },
  twitter: { // Para Twitter Cards
    card: 'summary_large_image', // 'summary' o 'summary_large_image' son comunes
    site: '@TuUsuarioTwitter', // Opcional: El handle de Twitter de tu marca
    creator: '@TuUsuarioTwitterPersonal', // Opcional: El handle del creador del contenido
    title: 'Título Impactante para Twitter | Tu Marca',
    description: 'Descripción breve y llamativa para Twitter.',
    images: ['/twitter-image-default.png'], // Ruta relativa a `metadataBase`
  },
  robots: { // Control para los crawlers
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  // Opcional: Verificación para consolas de búsqueda
  // verification: {
  //   google: 'TU_CODIGO_DE_VERIFICACION_GOOGLE',
  // },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es"> {/* ¡Importante para SEO y accesibilidad! */}
      <body>{children}</body>
    </html>
  );
}
```

**Para páginas individuales (`app/ruta-especifica/page.tsx`):**
Puedes exportar un objeto `metadata` similar para sobrescribir o complementar los valores del `layout.tsx`.

<Callout type="tip" title="Imágenes Absolutas para Redes Sociales">
Asegúrate de que `metadataBase` esté configurado en tu `layout.tsx` raíz. Esto permite que Next.js convierta rutas relativas de imágenes (como `/og-image.png`) en URLs absolutas, lo cual es esencial para que las plataformas de redes sociales las muestren correctamente.
</Callout>

### Datos Estructurados con Schema.org

Implementar Schema.org ayuda a los motores de búsqueda a entender el *significado* de tu contenido, lo que puede llevar a Rich Snippets (resultados enriquecidos) en las SERPs.

**Ejemplo: Schema para un Producto (Componente React)**

```tsx
// app/components/ProductSchemaScript.tsx
// Este componente se puede incluir en tu página de producto.

interface ProductSchemaProps {
  product: {
    name: string;
    description: string;
    image: string; // URL absoluta de la imagen
    sku?: string;
    brand?: { name: string };
    offers: {
      price: string;
      priceCurrency: string;
      availability: boolean; // true si está en stock
      url?: string; // URL a la oferta/producto
    };
    aggregateRating?: { // Opcional
      ratingValue: string;
      reviewCount: string;
    };
  };
}

export function ProductSchemaScript({ product }: ProductSchemaProps) {
  const schema = {
    "@context": "[https://schema.org](https://schema.org)",
    "@type": "Product",
    name: product.name,
    description: product.description,
    image: product.image,
    sku: product.sku,
    brand: product.brand ? { "@type": "Brand", name: product.brand.name } : undefined,
    offers: {
      "@type": "Offer",
      price: product.offers.price,
      priceCurrency: product.offers.priceCurrency,
      availability: product.offers.availability
        ? "[https://schema.org/InStock](https://schema.org/InStock)"
        : "[https://schema.org/OutOfStock](https://schema.org/OutOfStock)",
      url: product.offers.url || undefined,
    },
    aggregateRating: product.aggregateRating ? {
      "@type": "AggregateRating",
      ratingValue: product.aggregateRating.ratingValue,
      reviewCount: product.aggregateRating.reviewCount,
    } : undefined,
  };

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

**Uso en tu página de producto:**
`import { ProductSchemaScript } from '@/app/components/ProductSchemaScript';`
`<ProductSchemaScript product={productData} />`

<Callout type="info" title="Schema.org Simplificado con 10xDev">
Nuestras **plantillas para e-commerce de 10xDev** a menudo incluyen componentes pre-construidos para los tipos de Schema.org más comunes (Producto, Artículo, Organización, etc.), ahorrándote tiempo y asegurando una implementación correcta.
</Callout>

## Optimización de Contenido: Calidad y Relevancia

El contenido es el rey, pero debe estar optimizado para ser encontrado y para resonar con tu audiencia.

### Estructura de Encabezados (Headings)

Usa los encabezados (`H1`-`H6`) para crear una jerarquía lógica y semántica en tu contenido.

  - **`<h1>`**: Solo uno por página, debe contener la palabra clave principal y reflejar el título principal.
  - **`<h2>`**: Para secciones principales.
  - **`<h3>` a `<h6>`**: Para subsecciones, manteniendo la coherencia.

**Ejemplo de Estructura en un Artículo de Blog:**

```jsx
// app/blog/[slug]/page.tsx (dentro del return del componente)
<article>
  <h1 className="text-3xl md:text-4xl font-bold mb-4">{post.title}</h1>
  <p className="text-lg text-muted-foreground mb-6">{post.excerpt}</p>
  
  {/* Contenido del post */}
  <div className="max-w-none">
    {/* Aquí iría el contenido renderizado desde Markdown, por ejemplo */}
    {/* Ejemplo de estructura que generaría el Markdown: */}
    {/* <h2>Introducción a la Sección A</h2>
      <p>Texto...</p>
      <h3>Sub-punto A.1</h3>
      <p>Más texto...</p>
      <h2>Conclusión de la Sección B</h2> 
    */}
  </div>
</article>
```

### Optimización del Cuerpo del Texto

<Card className="my-6 p-6">

<h3 className="text-xl font-semibold mb-3">📝 Claves para un Texto que Impacta y Rankea</h3>
<ul className="list-disc pl-5 space-y-2 text-sm">
<li>**Investigación de Palabras Clave:** Integra tus keywords ([se quitó una URL no válida]) de forma natural y estratégica, sin sobreoptimizar (keyword stuffing).</li>
<li>**Legibilidad:** Párrafos cortos, frases claras, uso de listas y viñetas. Tipografía legible.</li>
<li>**Enlaces Internos:** Enlaza a otras páginas relevantes de tu sitio para distribuir la autoridad (link equity) y mejorar la navegación.</li>
<li>**Enlaces Externos:** Enlaza a fuentes autorizadas y relevantes cuando aporte valor al usuario.</li>
<li>**Optimización para Featured Snippets:** Usa listas, tablas, y responde preguntas de forma concisa (formato Q\&A) para aumentar tus posibilidades.</li>
<li>**Calidad y E-E-A-T:** Crea contenido original, bien investigado y que demuestre tu **E**xperiencia, **E**xpertise (Pericia), **A**utoridad y **T**rustworthiness (Fiabilidad). Esto es crucial para Google.</li>
<li>**Actualización Constante:** Revisa y actualiza tu contenido periódicamente para mantenerlo fresco y relevante.</li>
<li>**Llamadas a la Acción (CTAs):** Guía al usuario hacia el siguiente paso deseado.</li>
</ul>
<p className="text-xs mt-4 text-muted-foreground">
Utiliza los **prompts de IA de 10xDev** para generar ideas de contenido, optimizar la densidad de keywords o adaptar textos existentes, siempre enfocándote en E-E-A-T.
</p>
</Card>

## URLs y Estructura de Enlaces

### URLs Amigables y Semánticas

  - **Descriptivas:** `tusitio.com/servicios/desarrollo-nextjs` es mejor que `tusitio.com/s_id=123`.
  - **Cortas:** Más fáciles de recordar y compartir.
  - **Consistentes:** Usa guiones (`-`) para separar palabras, no guiones bajos (`_`).
  - **Jerárquicas:** `tusitio.com/blog/categoria/nombre-del-post`.

### Gestión de Redirecciones y Reescrituras (`next.config.mjs`)

```javascript
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/antigua-pagina-seo',
        destination: '/nueva-pagina-optimizada',
        permanent: true, // Redirección 301 para SEO
      },
    ];
  },
  async rewrites() {
    // Las reescrituras permiten mostrar contenido de una ruta bajo otra URL
    // Útil para rutas limpias sin cambiar la estructura del proyecto
    return [
      {
        source: '/articulos-populares/:slug',
        destination: '/blog/:slug', // El usuario ve /articulos-populares, Next.js sirve /blog
      },
    ];
  },
  // ...otras configuraciones
};
export default nextConfig;
```

### Enlaces Internos y Externos

Un componente `Link` personalizado puede ayudar a gestionar atributos para enlaces externos.

```tsx
// app/components/CustomLink.tsx
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
import React from 'react';

interface CustomLinkProps extends NextLinkProps {
  children: React.ReactNode;
  className?: string;
  // Puedes añadir más props personalizadas si es necesario
}

export function CustomLink({ href, children, className, ...props }: CustomLinkProps) {
  const isExternal = typeof href === 'string' && (href.startsWith('http') || href.startsWith('mailto:'));

  if (isExternal) {
    return (
      <a
        href={href as string}
        className={className}
        target="_blank"
        rel="noopener noreferrer" // Seguridad y SEO para enlaces externos
        {...props} // Pasa otras props HTML como 'title', 'aria-label', etc.
      >
        {children}
      </a>
    );
  }

  return (
    <NextLink href={href} className={className} {...props}>
      {children}
    </NextLink>
  );
}
```

## Optimización de Imágenes y Multimedia

### Imágenes (`next/image`)

  - Usa siempre `next/image` para optimización automática (tamaño, formato WebP/AVIF, lazy loading).
  - Proporciona `alt text` descriptivos para accesibilidad y SEO.
  - Define `width` y `height` para evitar CLS.
  - Usa el atributo `priority` para imágenes LCP.
  - Considera el atributo `sizes` para un control responsive más fino.

```tsx
// Uso dentro de un componente
import Image from 'next/image';
// ...
<figure className="my-4">
  <Image
    src="/images/mi-producto-estrella.jpg" // O import localImage from '...'
    alt="Descripción detallada de Mi Producto Estrella, resaltando características clave"
    width={800}
    height={450}
    sizes="(max-width: 768px) 100vw, 50vw"
    priority // Si es una imagen above-the-fold
  />
  <figcaption className="text-xs text-center text-muted-foreground mt-1">
    Mi Producto Estrella en acción.
  </figcaption>
</figure>
```

### Videos

  - **Carga Diferida (Lazy Load):** Usa el atributo `loading="lazy"` en iframes de video o implementa lazy loading con Intersection Observer.
  - **Placeholder/Poster:** Usa el atributo `poster` en la etiqueta `<video>` para mostrar una imagen mientras carga.
  - **Subtítulos y Transcripciones:** Mejoran la accesibilidad y pueden ser indexados.
  - **Datos Estructurados para Video (`VideoObject`):** Ayuda a Google a entender y mostrar tus videos en resultados de búsqueda enriquecidos.


```html
{/* Ejemplo básico de video HTML5 con optimizaciones */}
<video
  controls
  preload="none" /* Evita la precarga hasta que el usuario interactúe */
  poster="/videos/poster-mi-video.jpg"
  width="640"
  height="360"
  aria-label="Título descriptivo del video"
>
  <source src="/videos/mi-video-optimizado.mp4" type="video/mp4" />
  <source src="/videos/mi-video-optimizado.webm" type="video/webm" />
  <track
    kind="captions"
    src="/videos/subtitulos-es.vtt"
    srcLang="es"
    label="Español"
  />
  Tu navegador no soporta la etiqueta de video.
</video>
```

## SEO Local e Internacionalización (i18n)

Si tu audiencia es global o local, estas configuraciones son clave.

### Internacionalización en `next.config.mjs`

Next.js facilita la creación de sitios multi-idioma.

```javascript
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['es-ES', 'en-US', 'fr-FR'], // Tus idiomas soportados
    defaultLocale: 'es-ES', // Idioma por defecto
    // Opcional: configuración de dominios por locale
    // domains: [
    //   { domain: 'dominio.es', defaultLocale: 'es-ES' },
    //   { domain: 'dominio.com', defaultLocale: 'en-US' },
    // ],
  },
  // ...otras configuraciones
};
export default nextConfig;
```

### `hreflang` Tags para Contenido Multilingüe

Indican a Google las versiones idiomáticas de una misma página. Se gestionan con el objeto `metadata.alternates.languages` en el App Router.

```tsx
// app/[locale]/blog/[slug]/page.tsx (Ejemplo conceptual)

export async function generateMetadata({ params }: { params: { locale: string, slug: string }}) {
  const { locale, slug } = params;
  const siteUrl = '[https://www.tu-dominio.com](https://www.tu-dominio.com)'; // O desde variables de entorno

  // Lógica para obtener las URLs de las versiones alternativas
  // Esto es un ejemplo, deberás adaptarlo a tu estructura de datos
  const availableLocales = ['es-ES', 'en-US', 'fr-FR'];
  const languages: Record<string, string> = {};
  availableLocales.forEach(altLocale => {
    languages[altLocale.toLowerCase()] = `${siteUrl}/${altLocale}/blog/${slug}`;
  });

  return {
    // ...otros metadatos
    alternates: {
      canonical: `${siteUrl}/${locale}/blog/${slug}`, // URL canónica de la página actual
      languages: {
        ...languages,
        'x-default': `${siteUrl}/en-US/blog/${slug}`, // Versión por defecto para usuarios sin preferencia de idioma
      },
    },
  };
}
```

## Estrategias Clave de Contenido

### Enfoque Mobile-First

Google indexa primariamente la versión móvil de los sitios.

  - Diseño responsive y adaptativo.
  - Contenido conciso y fácil de escanear en pantallas pequeñas.
  - CTAs claros y accesibles.
  - Navegación simplificada.

### Alineación con la Intención de Búsqueda (Search Intent)

Comprende qué quieren los usuarios cuando buscan una keyword.

  - **Informacional:** Buscan respuestas (ej. "cómo hacer SEO en Next.js"). Crea guías, tutoriales, artículos.
  - **Navegacional:** Buscan un sitio o marca específica (ej. "10xDev"). Asegura que tu marca sea fácil de encontrar.
  - **Comercial/Investigación:** Comparan productos/servicios (ej. "mejores templates Next.js SaaS"). Crea comparativas, reviews.
  - **Transaccional:** Quieren comprar (ej. "comprar template Next.js e-commerce"). Optimiza páginas de producto/servicio.

## Optimización Específica por Tipo de Página

### Landing Pages

  - **Títulos (H1) persuasivos** con la keyword principal.
  - **Propuesta de valor clara** y visible "above the fold".
  - **CTAs (Call to Action) destacados** y orientados a la conversión.
  - **Prueba social:** Testimonios, logos de clientes, casos de estudio.
  - *Los bloques de UI de 10xDev para Landing Pages están diseñados para la conversión y el rendimiento.*

### Páginas de Producto (E-commerce)

  - **Descripciones únicas, detalladas y ricas en keywords.**
  - **Imágenes de alta calidad** con `alt text` optimizados.
  - **Especificaciones técnicas** completas.
  - **Reviews y ratings** de usuarios (con Schema.org `AggregateRating`).
  - **Schema.org `Product`** bien implementado.

### Artículos de Blog (Content Marketing)

  - **Contenido de valor** que resuelva problemas o responda preguntas.
  - **Estructura clara** con encabezados, listas y párrafos cortos.
  - **Enlaces internos** a contenido relacionado.
  - **Meta descripciones atractivas** para mejorar el CTR desde las SERPs.
  - **Schema.org `Article` o `BlogPosting`.**
    *Usa los **prompts de IA y templates de blog de 10xDev** para generar ideas y estructurar tus artículos.*

## Evitando Errores Comunes

<Callout type="warning" title="Cuidado con el Contenido Duplicado y la Canibalización">

  - **Contenido Duplicado:** Evita que el mismo contenido (o muy similar) aparezca en múltiples URLs. Usa `rel=&quot;canonical&quot;` (gestionado automáticamente por Next.js a través de `metadata.alternates.canonical` o `metadataBase`) y redirecciones 301.
  - **Canibalización de Keywords:** Impide que varias páginas de tu sitio compitan por la misma palabra clave principal. Cada página debe tener un enfoque único. Una sólida [se quitó una URL no válida] y una buena [se quitó una URL no válida] son tus mejores aliadas.
</Callout>

## Contenido para el Embudo de Conversión SaaS

Adapta tu contenido a cada etapa del viaje del cliente:

  - **TOFU (Top of Funnel - Descubrimiento):** Artículos de blog educativos, guías sobre problemas de la industria, infografías. Palabras clave informacionales.
  - **MOFU (Middle of Funnel - Consideración):** Comparativas de soluciones, estudios de caso, webinars, plantillas gratuitas, páginas de features detalladas. Palabras clave de investigación comercial.
  - **BOFU (Bottom of Funnel - Decisión):** Página de precios, demos de producto, documentación detallada, testimonios de clientes, ofertas especiales. Palabras clave transaccionales.

<Callout type="success" title="¡A Optimizar tu Contenido!">
El SEO On-Page y la creación de contenido de calidad son un esfuerzo continuo que rinde grandes frutos. Con Next.js y los recursos de 10xDev, tienes un arsenal poderoso para destacar.
Revisa nuestros recursos adicionales para profundizar:

  - [se quitó una URL no válida]
  - [se quitó una URL no válida]
  - [se quitó una URL no válida]
</Callout>


Domina la optimización de contenido y la estructura de tu aplicación Next.js (App Router) para atraer a tu audiencia y a los motores de búsqueda.

Optimización SEO On-Page y Creación de Contenido de Impacto en Next.js


Este documento describe las tablas creadas en la primera migración de la base de
datos y sus relaciones.

## Extensiones Habilitadas

Se habilitaron las siguientes extensiones de PostgreSQL:

- `moddatetime`: Proporciona una función de trigger (`moddatetime`) para
  actualizar automáticamente una columna de marca de tiempo (`updated_at`)
  cuando se modifica una fila.
- `uuid-ossp`: Proporciona funciones para generar UUIDs (Universally Unique
  Identifiers), como `uuid_generate_v4()`.

## Tipos Personalizados (ENUMs)

Se definieron los siguientes tipos enumerados para garantizar la consistencia de
los datos:

- `pricing_type`: Define los tipos de precios (`one_time`, `recurring`).
- `pricing_plan_interval`: Define los intervalos para los planes de precios
  recurrentes (`day`, `week`, `month`, `year`).
- `subscription_status`: Define los posibles estados de una suscripción
  (`trialing`, `active`, `canceled`, `incomplete`, `incomplete_expired`,
  `past_due`, `unpaid`, `paused`).
- `purchase_status`: Define los posibles estados de una compra única
  (`completed`, `pending`, `refunded`).
- `user_role`: Define los roles de usuario dentro de la aplicación (`user`,
  `editor`, `admin`).

## Tablas y sus Relaciones

A continuación, se describen las tablas creadas y sus relaciones:

### 1 users

- **Propósito:** Almacena la información de los usuarios de la aplicación.
- **Columnas:**
  - `id` (UUID, PRIMARY KEY, NOT NULL): Identificador único del usuario.
    Referencia a `auth.users(id)` con la acción `ON DELETE CASCADE`, lo que
    significa que si un usuario es eliminado de la tabla de autenticación,
    también se eliminará su registro en esta tabla.
  - `full_name` (TEXT): Nombre completo del usuario.
  - `avatar_url` (TEXT): URL del avatar del usuario.
  - `billing_address` (JSONB): Información de la dirección de facturación del
    usuario en formato JSON.
  - `payment_method` (JSONB): Detalles del método de pago del usuario en formato
    JSON **¡ADVERTENCIA!** Se debe considerar cuidadosamente la sensibilidad de
    estos datos y las implicaciones de seguridad al almacenarlos directamente en
    la base de datos. Es recomendable utilizar soluciones de procesamiento de
    pagos seguras (como Stripe) y almacenar solo los identificadores necesarios.
  - `role` (`user_role`, NOT NULL, DEFAULT 'user'): Rol del usuario, con 'user'
    como valor predeterminado.
  - `updated_at` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la última actualización
    del registro.
- **Triggers:**
  - `handle_updated_at`: Se ejecuta antes de cada operación de `UPDATE` en la
    tabla `users` y actualiza automáticamente la columna `updated_at` con la
    hora actual.
- **Funciones:**
  - `public.get_my_role()`: Función auxiliar que devuelve el rol del usuario
    autenticado actualmente utilizando `auth.uid()`. Se utiliza para implementar
    políticas de seguridad a nivel de fila basadas en roles.
- **Seguridad a Nivel de Fila (RLS):**
  - Política "Can view own user data.": Permite a los usuarios seleccionar (ver)
    solo sus propios datos (`auth.uid() = id`).
  - Política "Can update own user data.": Permite a los usuarios actualizar solo
    sus propios datos (`auth.uid() = id`).
  - Política "Admins can view all user data.": Permite a los usuarios con el rol
    'admin' seleccionar (ver) todos los datos de los usuarios
    (`public.get_my_role() = 'admin'`).
  - Política "Admins and Editors can update any user data.": Permite a los
    usuarios con los roles 'admin' o 'editor' actualizar cualquier dato de
    usuario (`public.get_my_role() in ('admin', 'editor')`).

### 2 customers

- **Propósito:** Mapea los IDs de los usuarios de la aplicación con sus IDs de
  cliente en Stripe (u otro proveedor de pagos). Esta tabla se considera
  privada.
- **Columnas:**
  - `id` (UUID, PRIMARY KEY, NOT NULL): Identificador único del cliente.
    Referencia a `auth.users(id)` con la acción `ON DELETE CASCADE`.
  - `stripe_customer_id` (TEXT): ID del cliente correspondiente en Stripe.
- **Constraints:**
  - `unique_stripe_customer_id`: Asegura que cada `stripe_customer_id` sea
    único.
  - `check_stripe_id`: Valida que el `stripe_customer_id` tenga el formato
    esperado ('cus_%').
- **Seguridad a Nivel de Fila (RLS):** Habilitada, pero no se definen políticas
  específicas en este fragmento. Generalmente, el acceso a esta tabla estaría
  restringido al backend.

### 3 products

- **Propósito:** Almacena la información de los productos, sincronizada desde
  Stripe (u otra plataforma) a través de webhooks.
- **Columnas:**
  - `id` (TEXT, PRIMARY KEY): Identificador único del producto (generalmente el
    ID de Stripe).
  - `active` (BOOLEAN): Indica si el producto está activo.
  - `name` (TEXT): Nombre del producto.
  - `description` (TEXT): Descripción del producto.
  - `image` (TEXT): URL de la imagen del producto.
  - `metadata` (JSONB): Metadatos adicionales del producto en formato JSON.
  - `created_at` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la creación del
    registro.
  - `updated_at` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la última actualización
    del registro.
- **Triggers:**
  - `handle_updated_at`: Se ejecuta antes de cada operación de `UPDATE` y
    actualiza la columna `updated_at`.
- **Seguridad a Nivel de Fila (RLS):**
  - Política "Allow public read-only access.": Permite a cualquier usuario
    seleccionar (ver) los datos de los productos.

### 4 prices

- **Propósito:** Almacena la información de los precios asociados a los
  productos, sincronizada desde Stripe (u otra plataforma).
- **Columnas:**
  - `id` (TEXT, PRIMARY KEY): Identificador único del precio (generalmente el ID
    de Stripe).
  - `product_id` (TEXT, NOT NULL): Identificador del producto al que pertenece
    este precio. Referencia a `products(id)` con la acción `ON DELETE CASCADE`.
    Si un producto es eliminado, sus precios asociados también se eliminarán.
  - `active` (BOOLEAN): Indica si el precio está activo.
  - `description` (TEXT): Descripción del precio.
  - `unit_amount` (BIGINT): Precio unitario en la unidad mínima de la moneda.
  - `currency` (TEXT, CHECK `char_length(currency) = 3`): Código de la moneda
    (ISO 4217).
  - `type` (`pricing_type`): Tipo de precio (`one_time` o `recurring`).
  - `interval` (`pricing_plan_interval`): Intervalo para precios recurrentes
    (`day`, `week`, `month`, `year`).
  - `interval_count` (INTEGER): Número de intervalos entre facturaciones para
    precios recurrentes.
  - `trial_period_days` (INTEGER): Número de días del período de prueba (si
    aplica).
  - `metadata` (JSONB): Metadatos adicionales del precio en formato JSON.
  - `created_at` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la creación del
    registro.
  - `updated_at` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la última actualización
    del registro.
- **Triggers:**
  - `handle_updated_at`: Se ejecuta antes de cada operación de `UPDATE` y
    actualiza la columna `updated_at`.
- **Índices:**
  - `idx_prices_product_id`: Índice en la columna `product_id` para optimizar
    las consultas que filtran por producto.
- **Seguridad a Nivel de Fila (RLS):**
  - Política "Allow public read-only access.": Permite a cualquier usuario
    seleccionar (ver) los datos de los precios.

### 5 subscriptions

- **Propósito:** Almacena la información de las suscripciones de los usuarios,
  sincronizada desde Stripe (u otra plataforma).
- **Columnas:**
  - `id` (TEXT, PRIMARY KEY): Identificador único de la suscripción
    (generalmente el ID de Stripe).
  - `user_id` (UUID, NOT NULL): Identificador del usuario al que pertenece la
    suscripción. Referencia a `auth.users(id)` con la acción
    `ON DELETE CASCADE`.
  - `status` (`subscription_status`): Estado actual de la suscripción.
  - `metadata` (JSONB): Metadatos adicionales de la suscripción en formato JSON.
  - `price_id` (TEXT, NOT NULL): Identificador del precio asociado a la
    suscripción. Referencia a `prices(id)` con la acción `ON DELETE RESTRICT`.
    No se permitirá eliminar un precio si existen suscripciones activas con ese
    precio.
  - `quantity` (INTEGER): Cantidad de unidades de la suscripción.
  - `cancel_at_period_end` (BOOLEAN): Indica si la suscripción se cancelará al
    final del período actual.
  - `created` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la creación de la
    suscripción.
  - `current_period_start` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo del inicio del período de
    facturación actual.
  - `current_period_end` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo del fin del período de
    facturación actual.
  - `ended_at` (TIMESTAMP WITH TIME ZONE): Marca de tiempo de la finalización de
    la suscripción (si ha terminado).
  - `cancel_at` (TIMESTAMP WITH TIME ZONE): Marca de tiempo en la que se
    cancelará la suscripción.
  - `canceled_at` (TIMESTAMP WITH TIME ZONE): Marca de tiempo en la que se
    canceló la suscripción.
  - `trial_start` (TIMESTAMP WITH TIME ZONE): Marca de tiempo del inicio del
    período de prueba (si aplica).
  - `trial_end` (TIMESTAMP WITH TIME ZONE): Marca de tiempo del fin del período
    de prueba (si aplica).
- **Índices:**
  - `idx_subscriptions_user_id`: Índice en la columna `user_id` para optimizar
    las consultas que filtran por usuario.
- **Seguridad a Nivel de Fila (RLS):**
  - Política "Can only view own subs data.": Permite a los usuarios seleccionar
    (ver) solo sus propias suscripciones (`auth.uid() = user_id`).
  - Política "Subscriptions managed via webhooks.": Impide todas las operaciones
    (`SELECT`, `INSERT`, `UPDATE`, `DELETE`) directamente en la tabla, asumiendo
    que la gestión se realiza a través de webhooks.
  - Política "Admins can view all subscriptions": Permite a los usuarios con el
    rol 'admin' seleccionar (ver) todas las suscripciones.

### 6 purchases

- **Propósito:** Registra las compras únicas de productos realizadas por los
  usuarios. Los registros probablemente se crean a través del backend o
  webhooks.
- **Columnas:**
  - `id` (UUID, PRIMARY KEY, DEFAULT `uuid_generate_v4()`): Identificador único
    de la compra generado automáticamente.
  - `user_id` (UUID, NOT NULL): Identificador del usuario que realizó la compra.
    Referencia a `auth.users(id)` con la acción `ON DELETE CASCADE`.
  - `product_id` (TEXT, NOT NULL): Identificador del producto comprado.
    Referencia a `products(id)` con la acción `ON DELETE RESTRICT`.
  - `price_id` (TEXT, NOT NULL): Identificador del precio pagado por el
    producto. Referencia a `prices(id)` con la acción `ON DELETE RESTRICT`.
  - `created_at` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la creación del
    registro.
  - `status` (`purchase_status`, NOT NULL, DEFAULT 'pending'): Estado actual de
    la compra ('completed', 'pending', 'refunded'). El valor predeterminado es
    'pending'.
  - `payment_intent_id` (TEXT): ID del PaymentIntent asociado (de Stripe, por
    ejemplo).
  - `session_id` (TEXT): ID de la sesión de pago (de Stripe Checkout, por
    ejemplo).
  - `metadata` (JSONB): Metadatos adicionales de la compra en formato JSON.
  - `updated_at` (TIMESTAMP WITH TIME ZONE, NOT NULL, DEFAULT
    `timezone('utc'::text, now())`): Marca de tiempo de la última actualización
    del registro.
- **Triggers:**
  - `handle_updated_at`: Se ejecuta antes de cada operación de `UPDATE` y
    actualiza la columna `updated_at`.
- **Índices:**
  - `purchases_user_id_idx`: Índice en la columna `user_id`.
  - `purchases_product_id_idx`: Índice en la columna `product_id`.
  - `purchases_price_id_idx`: Índice en la columna `price_id`.
- **Seguridad a Nivel de Fila (RLS):**
  - Política "Users can view their own purchases": Permite a los usuarios
    seleccionar (ver) solo sus propias compras (`auth.uid() = user_id`).
  - Política "Admins can view all purchases": Permite a los usuarios con el rol
    'admin' seleccionar (ver) todas las compras.
  - No se definen políticas `INSERT`, `UPDATE` o `DELETE` para usuarios, lo que
    sugiere que estas operaciones se gestionan a través del backend.

## Publicación para Realtime

Se creó una publicación llamada `supabase_realtime` para habilitar la escucha en
tiempo real de las tablas `products` y `prices`. Esto permite a los clientes
(frontend) recibir notificaciones automáticas cuando los datos de estas tablas
cambian.


Documentación detallada de las tablas y relaciones creadas en la primera migración de la base de datos, incluyendo extensiones, tipos personalizados, y políticas de seguridad a nivel de fila.

Primera Migración - Estructura de Base de Datos


<Card
  title="🚀 Optimiza tu Next.js para SEO con 10xDev"
  description="Implementa estrategias de SEO profesional en tu aplicación Next.js de forma eficiente con nuestras herramientas y plantillas optimizadas."
  icon="Search"
  >
  Dominar el SEO en Next.js es fundamental para mejorar la visibilidad de tu aplicación, atraer tráfico orgánico y, en última instancia, impulsar tus conversiones. Esta guía te proporcionará los conocimientos y las mejores prácticas. En 10xDev, integramos optimizaciones SEO en nuestros **templates y bloques de UI** desde la concepción para darte una ventaja inicial.
</Card>

## Fundamentos del SEO en Next.js

Para tener éxito, necesitas cubrir tres pilares clave del SEO:

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-8"> {/* Este div se mantiene si el grid es esencial para la presentación de estas 3 opciones principales */}
  <Card className="hover:border-primary/50 p-6"> {/* Padding aplicado directamente o manejado por el estilo global de Card */}
    <a href="/docs/seo/technical" className="focus:outline-none"> {/* Enlace sobre el contenido relevante */}
      <h3 className="text-lg font-semibold mb-2 text-primary hover:underline">⚙️ SEO Técnico</h3>
      <p className="text-sm text-muted-foreground mb-3">Asegura que tu sitio sea rastreable, indexable y rápido. Cubre desde la velocidad de carga hasta la estructura de datos.</p>
      <div className="flex flex-wrap gap-2 mt-2">
        <Badge variant="outline">Core Web Vitals</Badge>
        <Badge variant="outline">Rendimiento</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50 p-6">
    <a href="/docs/seo/content" className="focus:outline-none">
      <h3 className="text-lg font-semibold mb-2 text-primary hover:underline">📝 SEO On-Page</h3>
      <p className="text-sm text-muted-foreground mb-3">Optimiza el contenido y la estructura de tus páginas para palabras clave relevantes y la intención del usuario.</p>
      <div className="flex flex-wrap gap-2 mt-2">
        <Badge variant="outline">Contenido</Badge>
        <Badge variant="outline">Meta Tags</Badge>
      </div>
    </a>
  </Card>

  <Card className="hover:border-primary/50 p-6">
    <a href="/docs/seo/conversion" className="focus:outline-none">
      <h3 className="text-lg font-semibold mb-2 text-primary hover:underline">📊 Analítica y UX</h3>
      <p className="text-sm text-muted-foreground mb-3">Mide tus resultados, entiende el comportamiento del usuario y optimiza la experiencia para mejorar la conversión.</p>
      <div className="flex flex-wrap gap-2 mt-2">
        <Badge variant="outline">Métricas</Badge>
        <Badge variant="outline">UX</Badge>
      </div>
    </a>
  </Card>
</div>

## Configuración Inicial Esencial en Next.js (App Router)

Comienza con una base sólida configurando los metadatos correctamente.

### Metadatos Globales (`app/layout.tsx`)

Define metadatos por defecto para toda tu aplicación y una plantilla para los títulos.

```tsx
// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  // title: "Mi Aplicación Increíble", // Opción 1: Título fijo
  title: { // Opción 2: Título dinámico con plantilla
    default: '10xDev - Herramientas para Desarrolladores SaaS', // Título por defecto
    template: '%s | 10xDev', // %s será reemplazado por el título de la página específica
  },
  description: 'Potencia tu desarrollo SaaS con boilerplates, templates y bloques de UI para Next.js, React y Tailwind CSS.',
  keywords: ['Next.js', 'SaaS', 'Boilerplate', 'Desarrollo Web', 'React'], // Palabras clave relevantes
  authors: [{ name: 'El Equipo 10xDev', url: '[https://10xdev.com](https://10xdev.com)' }], // Autores
  creator: '10xDev', // Creador del contenido
  publisher: '10xDev', // Publicador
  openGraph: { // Metadatos para redes sociales (Open Graph)
    title: '10xDev - Acelera tu Desarrollo SaaS',
    description: 'Descubre herramientas y recursos para lanzar tu SaaS más rápido.',
    url: '[https://10xdev.com](https://10xdev.com)', // URL canónica de tu sitio
    siteName: '10xDev',
    images: [
      {
        url: '[https://10xdev.com/og-image.png](https://10xdev.com/og-image.png)', // URL absoluta de tu imagen Open Graph
        width: 1200,
        height: 630,
        alt: 'Logo de 10xDev con eslogan',
      },
    ],
    locale: 'es_ES', // Especifica el idioma
    type: 'website', // Tipo de contenido
  },
  twitter: { // Metadatos para Twitter Cards
    card: 'summary_large_image', // Tipo de card: summary, summary_large_image, app, player
    title: '10xDev - Herramientas para Desarrolladores Exigentes',
    description: 'Optimiza tu flujo de trabajo con los recursos de 10xDev.',
    // siteId: '@tuTwitterID', // (Opcional) ID de publicador de Twitter
    creator: '@tuUsuarioTwitter', // (Opcional) Usuario de Twitter del creador
    images: ['[https://10xdev.com/twitter-image.png](https://10xdev.com/twitter-image.png)'], // URL absoluta de tu imagen para Twitter
  },
  robots: { // Directivas para robots de búsqueda
    index: true, // Permitir indexación de la página
    follow: true, // Permitir seguir los enlaces de la página
    nocache: false, // Permitir caché (generalmente true para desarrollo)
    googleBot: { // Directivas específicas para GoogleBot
      index: true,
      follow: true,
      noimageindex: true, // No indexar imágenes de esta página (ejemplo)
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  // Opcional: verification para Google Search Console, etc.
  // verification: {
  //   google: 'tu-codigo-de-verificacion-google',
  //   yandex: 'tu-codigo-de-verificacion-yandex',
  // },
  // Opcional: iconos
  // icons: {
  //   icon: '/icon.png',
  //   shortcut: '/shortcut-icon.png',
  //   apple: '/apple-icon.png',
  // },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es"> {/* Especifica el idioma principal de tu sitio */}
      <body>{children}</body>
    </html>
  );
}
```

<Callout type="tip" title="¡Importante sobre las Imágenes OG/Twitter!">
Asegúrate de que las URLs de las imágenes para `openGraph` y `twitter` sean **absolutas** (ej. `https://www.tusitio.com/og-image.png`) para que las plataformas puedan acceder a ellas correctamente.
</Callout>

### Metadatos Específicos por Página

Puedes sobrescribir o añadir metadatos en páginas específicas:

```tsx
// app/sobre-nosotros/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Sobre Nosotros', // Esto se combinará con `title.template` del layout
  description: 'Conoce más sobre el equipo y la misión de 10xDev.',
  openGraph: {
    title: 'Sobre Nosotros - 10xDev',
    description: 'Descubre la historia y los valores de 10xDev.',
    // Puedes omitir images si quieres usar la imagen por defecto del layout,
    // o especificar una diferente para esta página.
  },
};

export default function SobreNosotrosPage() {
  return <h1>Sobre Nosotros</h1>;
}
```

### Estructura de URLs Amigable

  - Utiliza URLs descriptivas, cortas y que incluyan palabras clave relevantes (ej. `/servicios/desarrollo-web` en lugar de `/svc?id=123`).
  - Implementa una estructura jerárquica lógica que refleje la organización de tu contenido.
  - Gestiona redirecciones 301 (permanente) y 302 (temporal) correctamente para evitar contenido duplicado y traspasar la "autoridad" de SEO. Puedes usar el archivo `next.config.js` para [redirecciones](https://nextjs.org/docs/app/api-reference/next-config-js/redirects).

### `sitemap.xml` y `robots.txt`

  - **`sitemap.xml`**: Ayuda a los motores de búsqueda a descubrir todas las páginas importantes de tu sitio. Next.js puede [generar sitemaps dinámicamente](https://www.google.com/search?q=https://nextjs.org/docs/app/Sitemap).
  - **`robots.txt`**: Indica a los rastreadores qué partes de tu sitio deben o no deben rastrear. Colócalo en la carpeta `public`.
    ```txt
    # public/robots.txt
    User-agent: *
    Allow: /
    Disallow: /admin # Ejemplo: no rastrear la sección de administración
    Disallow: /private/

    Sitemap: [https://www.tusitio.com/sitemap.xml](https://www.tusitio.com/sitemap.xml)
    ```

## SEO Avanzado y por Tipo de Proyecto

<Callout type="info" title="Contenido Específico para tu Nicho">
En 10xDev, desarrollamos **plantillas especializadas** que ya consideran las necesidades SEO de diferentes tipos de proyectos como E-commerce, SaaS y Blogs.
</Callout>

### 🛍️ E-commerce

  - **Schema.org (Datos Estructurados):** Imprescindible para productos, ofertas, valoraciones. Ayuda a Google a mostrar "rich snippets".
      * *Nuestras plantillas para E-commerce en 10xDev vienen con Schema.org preconfigurado para productos.*
  - **Páginas de Categorías y Productos:** Optimiza títulos, descripciones, URLs e imágenes.
  - **URLs Canónicas:** Usa `<link rel="canonical" href="URL-preferida" />` para evitar contenido duplicado (ej. productos con variantes). Next.js gestiona esto con la metadata `alternates.canonical`.
  - **Breadcrumbs:** Mejoran la navegación y el SEO. Implementa datos estructurados para breadcrumbs.

### 📱 SaaS

  - **Landing Pages Optimizadas:** Para cada feature principal o solución. Deben ser rápidas y persuasivas.
      * *Los bloques de UI de 10xDev para landing pages están diseñados para la conversión y son ligeros.*
  - **Blog Técnico:** Atrae tráfico cualificado respondiendo preguntas y mostrando tu expertise.
  - **Estructura Clara de Features:** Facilita que los usuarios (y buscadores) entiendan tu producto.
  - **Core Web Vitals:** Un SaaS rápido es crucial para la retención y el SEO.

### 📰 Blog o Sitio de Contenido

  - **Taxonomías Claras:** Categorías y etiquetas bien definidas ayudan a organizar el contenido y mejoran la navegabilidad.
      * *Las plantillas de blog de 10xDev facilitan una estructura de taxonomías robusta.*
  - **Optimización de Contenido Multimedia:** Comprime imágenes, usa `next/image`, y añade `alt text` descriptivo.
  - **Datos Estructurados para Artículos:** Implementa `Article` schema.
  - **Enlaces Internos:** Distribuye la "autoridad" (link juice) y ayuda a los usuarios a descubrir más contenido.

## Herramientas Clave para tu Estrategia SEO

### Análisis y Diagnóstico

  - **Google Search Console:** Indispensable para entender cómo Google ve tu sitio, errores de rastreo, rendimiento de palabras clave.
  - **Google Analytics 4 (GA4):** Mide el tráfico, comportamiento del usuario y conversiones.
  - **Lighthouse / PageSpeed Insights:** Analiza el rendimiento y los Core Web Vitals.

### Investigación y Monitorización

  - **Ahrefs / SEMrush:** Herramientas potentes (de pago) para investigación de palabras clave, análisis de la competencia, auditorías SEO y seguimiento de rankings.
  - **Screaming Frog SEO Spider:** Aplicación de escritorio para rastrear tu sitio y encontrar problemas técnicos (versión gratuita limitada).
  - **Vercel Analytics:** Si despliegas en Vercel, ofrece métricas de rendimiento y audiencia fáciles de entender.

## Checklist Rápido de SEO para Next.js

### ✅ SEO Técnico

  - [ ] Configurar metadatos globales y por página (título, descripción, OG).
  - [ ] Usar SSG/ISR donde sea posible para velocidad.
  - [ ] Optimizar Core Web Vitals (LCP, FID/INP, CLS).
  - [ ] Generar y enviar `sitemap.xml`.
  - [ ] Configurar `robots.txt` correctamente.
  - [ ] Asegurar HTTPS (SSL/TLS) y considerar HSTS.
  - [ ] URLs amigables y estructura lógica.
  - [ ] Manejar redirecciones 301/302.

### ✅ Contenido y On-Page

  - [ ] Investigación de palabras clave (Keyword Research).
  - [ ] Optimizar títulos (`<title>` y `H1`) y meta descripciones.
  - [ ] Estructurar contenido con encabezados (`H1-H6`).
  - [ ] Implementar Schema.org (Datos Estructurados) relevante.
  - [ ] Optimizar imágenes: compresión, `next/image`, y `alt text` descriptivo.
  - [ ] Contenido de calidad, original y que responda a la intención del usuario.
  - [ ] Buena estrategia de enlaces internos.

### ✅ UX y Rendimiento Móvil

  - [ ] Optimizar la velocidad de carga general.
  - [ ] Asegurar un diseño responsive y optimizado para móviles.
  - [ ] Implementar breadcrumbs si aplica.
  - [ ] Revisar y corregir enlaces rotos periódicamente.
  - [ ] Facilitar la navegación y la legibilidad.

<Callout type="success" title="¡Estás en Camino!">
El SEO es un proceso continuo de optimización y aprendizaje. Con Next.js tienes una base técnica excelente.
Profundiza en cada aspecto con nuestras guías detalladas y no dudes en usar los **recursos de 10xDev** para acelerar tu implementación.

  - [Guía Avanzada de SEO Técnico en Next.js](https://www.google.com/search?q=/docs/seo/technical-advanced)
  - [Estrategias de Contenido SEO que Convierten](https://www.google.com/search?q=/docs/seo/content-strategy)
  - [Midiendo el ROI de tu SEO: Analítica y KPIs](https://www.google.com/search?q=/docs/seo/analytics-kpis)

</Callout>



Aprende a optimizar tu aplicación Next.js para los motores de búsqueda, mejora tu posicionamiento y atrae más tráfico orgánico cualificado.

SEO Impecable en Next.js para Máxima Visibilidad


<Card
  title="⚙️ SEO Técnico Avanzado con Next.js y 10xDev"
  description="Domina los aspectos técnicos del SEO en Next.js para maximizar el rendimiento, la rastreabilidad y la indexabilidad de tu aplicación, impulsado por las soluciones de 10xDev."
  icon="Settings"
>
  El SEO técnico es la base sobre la cual se construyen todas las demás estrategias de optimización. Para aplicaciones Next.js, especialmente con el App Router, esto implica optimizar el rendimiento (Core Web Vitals), la forma en que los motores de búsqueda rastrean e indexan tu contenido, y la configuración general de tu sitio. Los **templates y bloques de UI de 10xDev** están construidos con estas mejores prácticas en mente, dándote una base sólida.
</Card>

## Core Web Vitals: El Corazón del Rendimiento y la UX

<Callout type="info" title="¿Por qué son cruciales los Core Web Vitals?">
  Google utiliza los Core Web Vitals (CWV) como un factor de ranking significativo porque reflejan directamente la experiencia del usuario. Una buena puntuación no solo mejora tu SEO, sino que también reduce la tasa de rebote, aumenta el tiempo de permanencia y puede mejorar las conversiones. Un sitio rápido y estable es fundamental para cualquier SaaS o proyecto web. Los **componentes de UI de 10xDev** están diseñados para ser ligeros y performantes, ayudándote a alcanzar estos objetivos.
</Callout>

### Métricas Principales y Cómo Mejorarlas

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-8"> {/* Grid justificado aquí para comparación directa de las 3 métricas */}
  <Card className="p-4 md:p-6"> {/* Padding gestionado por Card o clase interna */}
    <h3 className="text-xl font-semibold mb-2">⚡ LCP (Largest Contentful Paint)</h3>
    <p className="text-sm text-muted-foreground mb-3">Mide el tiempo de carga del elemento de contenido más grande visible en la ventana gráfica.</p>
    <div className="mb-3">
      <Badge variant="success">Objetivo: Menos de 2.5 segundos</Badge>
    </div>
    <h4 className="font-medium text-sm mb-1">Optimización:</h4>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Optimiza imágenes (compresión, formato WebP).</li>
      <li>Usa `next/image` con el atributo `priority` para imágenes LCP.</li>
      <li>Precarga recursos críticos.</li>
      <li>Reduce el tiempo de respuesta del servidor (TTFB).</li>
      <li>Evita CSS/JS que bloqueen el renderizado.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-2">🔄 INP (Interaction to Next Paint)</h3>
    <p className="text-sm text-muted-foreground mb-3">Mide la capacidad de respuesta de la página a las interacciones del usuario. Reemplazó a FID en marzo de 2024.</p>
    <div className="mb-3">
      <Badge variant="success">Objetivo: Menos de 200 milisegundos</Badge>
    </div>
    <h4 className="font-medium text-sm mb-1">Optimización:</h4>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Minimiza y divide el código JavaScript.</li>
      <li>Optimiza `event handlers` (debounce, throttle).</li>
      <li>Usa Web Workers para tareas pesadas.</li>
      <li>Reduce el trabajo en el hilo principal.</li>
      <li>Prioriza la carga de scripts interactivos.</li>
    </ul>
  </Card>

  <Card className="p-4 md:p-6">
    <h3 className="text-xl font-semibold mb-2">📊 CLS (Cumulative Layout Shift)</h3>
    <p className="text-sm text-muted-foreground mb-3">Mide la estabilidad visual de la página, evitando cambios inesperados de diseño.</p>
    <div className="mb-3">
      <Badge variant="success">Objetivo: Menos de 0.1</Badge>
    </div>
    <h4 className="font-medium text-sm mb-1">Optimización:</h4>
    <ul className="list-disc pl-5 space-y-1 text-sm text-muted-foreground">
      <li>Especifica dimensiones (ancho y alto) para imágenes y videos.</li>
      <li>Evita inserciones de contenido dinámico sobre contenido existente.</li>
      <li>Gestiona la carga de fuentes web para evitar FOIT/FOUT (usa `next/font`).</li>
      <li>Reserva espacio para anuncios o iframes.</li>
    </ul>
  </Card>
</div>

## Optimización Maestra de Imágenes con `next/image`

El componente `next/image` es tu mejor aliado para la optimización automática de imágenes.

### Uso Básico y Avanzado

```tsx
// app/components/MyOptimizedImage.tsx
import Image from 'next/image';

// Opcional: para placeholders de blur si tus imágenes no son estáticas locales
// import { getPlaceholder } from "placeholder";

// async function getBlurData(src: string) {
//   try {
//     const buffer = await fetch(src).then(async (res) =>
//       Buffer.from(await res.arrayBuffer())
//     );
//     const { base64 } = await getPlaiceholder(buffer);
//     return base64;
//   } catch (err) {
//     console.error("Error generating blurDataURL:", err);
//     return "data:image/svg+xml;base64,..."; // Un placeholder SVG simple como fallback
//   }
// }

export async function MyOptimizedImage() {
  // const blurData = await getBlurData("/images/hero-large.jpg"); // Para imágenes remotas o que no son importadas directamente

  return (
    <Image
      src="/images/example-product.jpg" // Ruta desde la carpeta `public` o importación estática
      alt="Descripción detallada y optimizada para SEO de la imagen del producto"
      width={800} // Ancho intrínseco de la imagen original
      height={600} // Alto intrínseco de la imagen original
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" // Responsive sizing
      // placeholder="blur" // Activa el placeholder de blur
      // blurDataURL={blurData} //  blurDataURL generado (o usa import estático para auto-blur)
      priority={true} // `true` para imágenes LCP (above-the-fold)
      // quality={75} // Calidad de la imagen (1-100, por defecto 75)
      // unoptimized={false} // `true` si no quieres optimización (ej. para GIFs)
    />
  );
}
```

**Nota:** Para `blurDataURL` con imágenes estáticas importadas, Next.js puede generarlo automáticamente:
`import localImage from '../public/images/local-image.png';`
Luego, en el componente: `placeholder="blur" blurDataURL={localImage.blurDataURL}`.

### Configuración en `next.config.mjs` (o `.js`)

Permite optimizar imágenes de dominios externos y personaliza la optimización.

```javascript
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [ // Reemplaza 'domains' que está obsoleto
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
        port: '',
        pathname: '/images/**', // Opcional: solo imágenes de una ruta específica
      },
    ],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920], // Tamaños para generar en base al viewport
    imageSizes: [16, 32, 48, 64, 96, 128, 256], // Tamaños para usar con el atributo `sizes`
    formats: ['image/avif', 'image/webp'], // Formatos a generar, priorizando los más modernos
    dangerouslyAllowSVG: true, // Si necesitas servir SVGs a través del optimizador
    contentDispositionType: 'attachment', // O 'inline'
  },
};

export default nextConfig;
```

<Callout type="tip" title="Templates 10xDev">
Nuestros **templates de Next.js en 10xDev** suelen incluir configuraciones de `next/image` optimizadas y ejemplos de uso para ayudarte a empezar rápidamente.
</Callout>

## Estrategias de Renderizado en el App Router para SEO

Elige la estrategia adecuada para cada tipo de contenido.

### 1 Componentes de Servidor (Server Components - por defecto)

Son excelentes para SEO ya que el HTML se renderiza en el servidor. Pueden ser dinámicos o cacheados.

### 2 Generación Estática Completa (Full Static Export)

Si tu sitio es completamente estático, puedes exportarlo como HTML/CSS/JS puro. Configura `output: 'export'` en `next.config.mjs`. Ideal para sitios sin necesidad de servidor.

### 3 Generación Estática de Rutas Específicas (`generateStaticParams`)

Para rutas dinámicas que quieres pre-renderizar en el momento del build (SSG).

```tsx
// app/blog/[slug]/page.tsx

// Esta función se ejecuta en el build para generar las rutas estáticas
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json());
  // posts es un array de objetos, ej: [{ slug: 'mi-post' }, { slug: 'otro-post' }]
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// La página del post
export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://.../posts/${params.slug}`).then((res) => res.json());
  // ... renderiza el post
  return <div>{post.title}</div>;
}
```

### 4\. Revalidación Basada en Tiempo (ISR)

Para contenido que cambia pero no constantemente. Se sirve estático y se regenera en segundo plano.

```tsx
// app/products/[id]/page.tsx
export const revalidate = 3600; // Revalida esta página cada hora (3600 segundos)

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`, {
    // next: { revalidate: 3600 } // Alternativa: revalidación a nivel de fetch
  }).then(res => res.json());

  return <div>{product.name}</div>;
}
```

## Configuración Efectiva de Caché

Controla cómo se cachea tu contenido en navegadores y CDNs.

### Headers de `Cache-Control` en Route Handlers

Para tus API endpoints o respuestas personalizadas.

```ts
// app/api/mydata/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const data = { message: 'Hola desde la API!' };
  return NextResponse.json(data, {
    status: 200,
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=59',
      // s-maxage: para CDNs (Vercel Edge)
      // stale-while-revalidate: sirve caché mientras se revalida en background
    },
  });
}
```

### Caché con Middleware (`middleware.ts`)

Para aplicar headers de caché a rutas específicas, especialmente assets.

```ts
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Cache para assets inmutables en la carpeta `public` (ej. fuentes, iconos)
  // Asumiendo que los assets versionados de /_next/static ya tienen buen cacheo por defecto.
  if (request.nextUrl.pathname.startsWith('/fonts/')) {
    response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
  }

  return response;
}

// Configura el matcher para que el middleware solo se ejecute en rutas específicas
export const config = {
  matcher: ['/fonts/:path*'],
};
```

## Optimización Fina de JavaScript

### Code Splitting y `next/dynamic`

Next.js realiza code splitting automático por ruta. Usa `next/dynamic` para cargar componentes de forma diferida (lazy loading).

```tsx
// app/components/MyPageWithHeavyComponent.tsx
import dynamic from 'next/dynamic';
import LoadingSpinner from './LoadingSpinner'; // Un componente de carga simple

const HeavyInteractiveChart = dynamic(
  () => import('./HeavyInteractiveChart'), // El componente a cargar de forma diferida
  {
    loading: () => <LoadingSpinner />, // Componente a mostrar mientras carga
    ssr: false, // `false` si el componente solo funciona en el cliente o para reducir carga inicial
  }
);

export default function MyPage() {
  return (
    <div>
      <h1>Bienvenido</h1>
      <p>Contenido principal...</p>
      <HeavyInteractiveChart /> {/* Se cargará solo cuando sea necesario (o visible) */}
    </div>
  );
}
```

### Analizando el Bundle

Identifica qué módulos están inflando tu bundle.

```bash
# Instala la herramienta de análisis
pnpm add -D @next/bundle-analyzer # o npm/yarn

# Añade a tu next.config.mjs
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer(nextConfig); // Envuelve tu config existente

# Ejecuta el build con la variable ANALYZE
ANALYZE=true pnpm build
```

Esto abrirá un informe visual en tu navegador.

## `robots.txt` y Generación de Sitemaps

### `robots.txt`

Coloca un archivo `robots.txt` en tu carpeta `app` (Next.js lo servirá desde la raíz).

```txt
# app/robots.txt
User-agent: *
Allow: / # Permite rastrear todo por defecto
Disallow: /admin/ # Ejemplo: no rastrear la sección de administración
Disallow: /api/ # Generalmente no quieres que se indexen tus API
Disallow: /private-route # Otra ruta privada

Sitemap: [https://www.tu-dominio.com/sitemap.xml](https://www.tu-dominio.com/sitemap.xml) # URL absoluta de tu sitemap
```

### Generación de `sitemap.xml` (App Router)

Next.js permite generar sitemaps dinámicos o estáticos.

```ts
// app/sitemap.ts (o .xml.ts si prefieres una ruta .xml)
import { MetadataRoute } from 'next';

// Asumiendo que tienes funciones para obtener tus posts y productos
// import { getAllPosts, getAllProducts } from '@/lib/data-fetching';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const BASE_URL = '[https://www.tu-dominio.com](https://www.tu-dominio.com)';

  // Ejemplo: posts de un blog
  // const posts = await getAllPosts();
  // const postEntries: MetadataRoute.Sitemap = posts.map(({ slug, updatedAt }) => ({
  //   url: `${BASE_URL}/blog/${slug}`,
  //   lastModified: new Date(updatedAt),
  //   changeFrequency: 'weekly',
  //   priority: 0.8,
  // }));

  // Ejemplo: productos
  // const products = await getAllProducts();
  // const productEntries: MetadataRoute.Sitemap = products.map(({ id, lastUpdated }) => ({
  //   url: `${BASE_URL}/products/${id}`,
  //   lastModified: new Date(lastUpdated),
  //   changeFrequency: 'daily',
  //   priority: 0.9,
  // }));

  return [
    {
      url: BASE_URL,
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: `${BASE_URL}/about`,
      lastModified: new Date(), // O fecha de la última modificación real
      changeFrequency: 'monthly',
      priority: 0.5,
    },
    // ...postEntries,
    // ...productEntries,
  ];
}
```

Next.js generará automáticamente `sitemap.xml` en el build si este archivo existe.

## Monitorización del Rendimiento y Errores

### Reporte de Web Vitals (App Router)

Puedes usar `useReportWebVitals` hook de `next/web-vitals` en un Client Component, o instrumentar directamente en tu `RootLayout` o un componente específico.

```tsx
// app/layout.tsx (o un client component específico)
'use client'; // Necesario si usas el hook o manipulas el window

import { useReportWebVitals } from 'next/web-vitals';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useReportWebVitals((metric) => {
    console.log(metric); // Muestra la métrica en consola
    // Envía a tu servicio de analíticas (ej. Google Analytics, Vercel Analytics)
    // if (metric.label === 'web-vital') {
    //   sendToAnalytics(metric);
    // }
  });

  return (
    <html lang="es">
      <body>{children}</body>
    </html>
  );
}
```

### Seguimiento de Errores (Error Tracking)

Integra servicios como Sentry para capturar errores en producción.

```tsx
// sentry.client.config.ts (y sentry.server.config.ts, sentry.edge.config.ts)
// Sigue la documentación de Sentry para la configuración en Next.js App Router
// [https://docs.sentry.io/platforms/javascript/guides/nextjs/](https://docs.sentry.io/platforms/javascript/guides/nextjs/)
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "TU_DSN_DE_SENTRY_AQUI",
  tracesSampleRate: 1.0, // Ajusta en producción
  // Otras opciones de configuración
  debug: process.env.NODE_ENV === 'development', // Habilita debug en desarrollo
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
});
```

Asegúrate de configurar los archivos `sentry.*.config.ts` y el `instrumentation.ts` según la guía oficial de Sentry para Next.js.

\<Callout type="warning" title="Claves para un Mantenimiento Exitoso"\>

  - **Monitoriza Continuamente:** Los Core Web Vitals y el rendimiento pueden cambiar. Usa herramientas como Google Search Console, PageSpeed Insights y Vercel Analytics.
  - **Pruebas Automatizadas:** Integra pruebas de rendimiento (ej. con Lighthouse CI) en tu pipeline de CI/CD.
  - **Dependencias Actualizadas:** Mantén Next.js y otras dependencias al día para mejoras de rendimiento y seguridad.
  - **Revisión de Logs:** Analiza logs de errores y de servidor para identificar problemas proactivamente.
    \</Callout\>

## Más Allá: Recursos Adicionales

  - [Documentación Oficial de Next.js sobre Optimización](https://nextjs.org/docs/app/building-your-application/optimizing)
  - [web.dev de Google sobre Core Web Vitals](https://web.dev/vitals/)
  - Consulta los **starters y ejemplos de 10xDev** para ver implementaciones prácticas de estas técnicas.



Optimiza el rendimiento, la indexabilidad y la experiencia de usuario de tu aplicación Next.js con técnicas avanzadas y las mejores prácticas para el App Router.

SEO Técnico Avanzado en Next.js (App Router)


**Objetivo:** Implementar un sistema robusto y seguro para permitir a los
usuarios que han comprado un paquete descargar los archivos correspondientes
(`.zip`).

**Flujo General:**

1. El paquete de boilerplate/template se comprime en un archivo `.zip`.
2. El archivo `.zip` se sube a un bucket **privado** en Supabase Storage.
3. El usuario compra el producto a través de Stripe Checkout.
4. El webhook de Stripe registra la compra exitosa en nuestra DB
   (`user_products`).
5. El usuario navega a la página de "Descargas" en su dashboard (requiere
   autenticación).
6. La página de descargas lista los productos comprados por el usuario.
7. El usuario hace clic en el botón de descarga para un producto específico.
8. Esto desencadena una llamada a una API Route segura en nuestro backend.
9. La API Route verifica:
   - Que el usuario esté autenticado.
   - Que el usuario haya comprado el producto solicitado (consultando
     `user_products`).
10. Si está autorizado, la API Route streamea el archivo `.zip` desde Supabase
    Storage directamente al navegador del usuario.

**Prerrequisitos:**

- Proyecto Next.js con Pages Router, TypeScript, Tailwind, pnpm configurado.
- Supabase integrado (Auth, Database, Storage).
- Stripe integrado (Checkout, Webhooks configurados y funcionales, registrando
  compras en `user_products` - _esta parte se asume ya implementada del flujo de
  pago_).
- Resend integrado (usado para notificaciones, no directamente en el flujo de
  descarga _per se_, pero parte del ecosistema).
- Acceso a las credenciales de Supabase (URL, `anon` key, `service_role` key) y
  Stripe (Secret Key, Webhook Secret).

---

### Paso 1: Preparación del Archivo Descargable (`.zip`)

Cada paquete de producto (10xDev Advanced, 10xDev Full) debe ser un único
archivo comprimido.

1 **Comprimir los Archivos:** Asegúrate de que todo el contenido del
   boilerplate o template esté dentro de un archivo `.zip`.
2 **Nombrar el Archivo:** Usa un nombre de archivo consistente y que puedas
   mapear fácilmente desde tu código. Sugerimos usar el identificador interno
   del producto.
   - Para 10xDev Full: `10xdev-full.zip`
   - Para 10xDev Advanced: `10xdev-advanced.zip`

---

### Paso 2: Configuración del Bucket de Supabase Storage

Los archivos descargables deben estar en un lugar seguro y no accesible
públicamente. Supabase Storage con políticas adecuadas es ideal.

1 **Crear un Nuevo Bucket:**
   - Ve al dashboard de Supabase.
   - Navega a "Storage".
   - Haz clic en "New bucket".
   - Nombra el bucket (ej: `product-downloads`).
   - **MUY IMPORTANTE:** Desmarca la opción "Public bucket". El bucket debe ser
     **privado**.
   - Haz clic en "Create bucket".

2 **Configurar Políticas de Acceso (Policies):**
   - Una vez creado el bucket, selecciónalo.
   - Ve a la pestaña "Policies".
   - Por defecto, un bucket privado niega el acceso `anon`. Sin embargo, es
     buena práctica ser explícito.
   - Asegúrate de que NO haya políticas que permitan `SELECT` para roles `anon`
     o `authenticated`.
   - La forma más segura para nuestro caso (donde una API route gestiona el
     acceso) es que la API route use la clave `service_role` de Supabase (que
     bypassa RLS) o genere URLs firmadas temporalmente _después_ de verificar el
     acceso en código. Si usamos la clave `service_role` en la API, no
     necesitamos RLS complejas en el bucket; la política por defecto que niega
     el acceso público/autenticado es suficiente.
   - **Verifica que no haya políticas que permitan `SELECT` a usuarios no
     autorizados.** La política por defecto para buckets privados suele ser
     suficiente, pero siempre revisa. El acceso lo gestionará tu backend.

3 **Subir los Archivos `.zip`:**
   - Dentro del bucket `product-downloads`, sube los archivos `.zip` que creaste
     en el Paso 1 (ej: `10xdev-full.zip`, `10xdev-advanced.zip`). Puedes
     subirlos directamente a la raíz del bucket o crear una estructura de
     carpetas si lo prefieres (ej: `downloads/10xdev-full.zip`), pero recuerda
     la ruta.

---

### Paso 3: Verificación del Modelo de Datos `user_products`

Asegúrate de tener la tabla que registra qué usuario compró qué producto.

- **Tabla:** `user_products`
  - `id`: `uuid` (PK)
  - `user_id`: `uuid` (FK a `auth.users`, NOT NULL) - **CRÍTICO** para saber
    quién compró.
  - `product_id`: `text` (Identificador interno del producto, ej:
    `'10xdev-full'`, `'10xdev-advanced'`, NOT NULL) - Este ID debe coincidir con
    el que usarás en tu código y en el nombre del archivo `.zip`.
  - `stripe_checkout_session_id`: `text` (Vinculación con Stripe, NOT NULL)
  - `purchased_at`: `timestamp with time zone` (NOT NULL, default `now()`)
  - `created_at`: `timestamp with time zone` (NOT NULL, default `now()`)

- **RLS en `user_products`:** Configura políticas de RLS para `user_products`
  que solo permitan a un usuario `SELECT` sus propios registros
  (`auth.uid() = user_id`). Esto protege los datos del usuario si alguna vez
  haces consultas directas desde el frontend (aunque nuestra API lo verificará
  también).

---

### Paso 4: Implementación de la API Route de Descarga Segura

Esta es la pieza central de seguridad. Controla quién puede descargar qué.

**Archivo:** `pages/api/download/[productId].ts`

```typescript
import { NextApiRequest, NextApiResponse } from "next";
import { createClient } from "@supabase/supabase-js";
import { Database } from "@/types/supabase"; // Asegúrate de tener los tipos de Supabase generados
import { getUser } from "@/utils/auth"; // Helper para obtener el usuario de la sesión

// --- Configuración de Supabase para la API Route ---
// Usamos la clave service_role para acceder a Storage de forma segura después de verificar permisos del usuario.
// NUNCA expongas la clave service_role en el frontend.
const supabaseServiceRole = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!, // Asegúrate de que esta variable de entorno exista y sea SECRETA
);

// También necesitas el cliente estándar si tu helper getUser lo requiere o para consultar user_products
// Asumimos que ya tienes lib/supabase.ts que exporta el cliente estándar
import { supabase } from "@/lib/supabase"; // Cliente estándar

// --- Mapeo de product_id a ruta de archivo en Supabase Storage ---
const productToFileMap: { [key: string]: string } = {
  "10xdev-full": "10xdev-full.zip",
  "10xdev-advanced": "10xdev-advanced.zip",
  // Agrega más productos aquí
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  if (req.method !== "GET") {
    return res.status(405).json({ message: "Method Not Allowed" });
  }

  const { productId } = req.query;

  if (typeof productId !== "string" || !productId) {
    return res.status(400).json({ message: "Missing or invalid product ID" });
  }

  // 1. Verificar Autenticación del Usuario
  const user = await getUser({ req, res }); // Asume que getUser obtiene el usuario de la sesión o token
  if (!user) {
    // No autenticado: Denegar acceso
    return res.status(401).json({ message: "Unauthorized" });
  }

  // 2. Verificar Autorización (Entitlement Check)
  try {
    const { data: purchaseData, error: purchaseError } = await supabase
      .from("user_products")
      .select("id")
      .eq("user_id", user.id)
      .eq("product_id", productId)
      .single(); // Usamos .single() porque esperamos como máximo 1 resultado para un user/product

    if (purchaseError && purchaseError.code !== "PGRST116") { // PGRST116 es 'No Rows Found'
      console.error("Database error checking purchase:", purchaseError);
      return res.status(500).json({
        message: "Internal server error checking purchase.",
      });
    }

    if (!purchaseData) {
      // Usuario no ha comprado este producto: Denegar acceso
      return res.status(403).json({
        message: "Forbidden - Product not purchased",
      });
    }

    // 3. Obtener la Ruta del Archivo en Storage
    const filePath = productToFileMap[productId];
    if (!filePath) {
      // product_id válido en DB pero no mapeado a archivo (error de configuración):
      console.error(`No file path mapping found for product ID: ${productId}`);
      return res.status(500).json({ message: "Download configuration error." });
    }
    const storagePath = `/${filePath}`; // Ruta dentro del bucket

    // 4. Stream del Archivo desde Supabase Storage (Usando service_role)
    try {
      const { data: fileData, error: fileError } = await supabaseServiceRole
        .storage
        .from("product-downloads") // Nombre de tu bucket
        .download(storagePath);

      if (fileError) {
        console.error(
          `Error downloading file ${storagePath} from storage:`,
          fileError,
        );
        if (fileError.message.includes("Not Found")) {
          return res.status(404).json({
            message: "File not found in storage.",
          });
        }
        return res.status(500).json({
          message: "Error fetching file from storage.",
        });
      }

      // 5. Configurar Cabeceras de Respuesta para Descarga
      res.setHeader("Content-Type", "application/zip"); // O el tipo MIME adecuado si no es un zip
      res.setHeader(
        "Content-Disposition",
        `attachment; filename="${filePath}"`,
      ); // Fuerza la descarga con el nombre de archivo original
      // res.setHeader('Content-Length', fileData.size); // Opcional, mejora la barra de progreso

      // 6. Enviar el Archivo al Cliente
      // El método .download() de Supabase SDK devuelve un Blob. Necesitamos convertirlo a un stream o ArrayBuffer para enviar.
      // La forma más sencilla en Next.js API Routes es convertir el Blob a ArrayBuffer y enviarlo.
      const arrayBuffer = await fileData.arrayBuffer();
      const buffer = Buffer.from(arrayBuffer);

      res.status(200).send(buffer);
    } catch (storageError) {
      console.error("Unexpected storage operation error:", storageError);
      res.status(500).json({
        message: "Unexpected error during storage operation.",
      });
    }
  } catch (generalError) {
    console.error("Unexpected error in download API:", generalError);
    res.status(500).json({ message: "An unexpected error occurred." });
  }
}
```

**Explicación del Código de la API Route:**

- **Importaciones:** Importa lo necesario de Next.js, Supabase, y tus helpers.
- **Clientes Supabase:** Se inicializa un cliente `supabaseServiceRole` usando
  la clave `SUPABASE_SERVICE_ROLE_KEY`. Esta clave tiene permisos elevados y
  bypassa las políticas de RLS en la base de datos y storage, permitiéndonos
  leer archivos privados _después_ de haber verificado la autorización del
  usuario con el cliente estándar.
- **`productToFileMap`:** Un objeto simple que mapea el `product_id` interno
  (usado en tu DB y código) a la ruta del archivo en el bucket de Supabase
  Storage. Mantén esto actualizado.
- **`handler`:** La función principal de la API Route.
- **Verificación de Método HTTP:** Solo acepta peticiones `GET`.
- **Extracción `productId`:** Obtiene el ID del producto de la URL.
- **Verificación de Autenticación (`getUser`):** Usa tu helper para obtener el
  usuario logueado. Si no hay usuario, devuelve 401.
- **Verificación de Autorización
  (`supabase.from('user_products').select()...`):** **Esta es la verificación de
  negocio.** Consulta la tabla `user_products` para confirmar que existe una
  entrada para el `user.id` autenticado y el `productId` solicitado. Si no se
  encuentra, devuelve 403.
- **Mapeo a Ruta de Archivo:** Usa `productToFileMap` para encontrar la ruta del
  archivo `.zip` correspondiente en Supabase Storage.
- **Descarga del Archivo (`supabaseServiceRole.storage.from().download()`):**
  Usa el cliente con `service_role` para descargar el contenido del archivo del
  bucket privado.
- **Configuración de Cabeceras:** Establece el `Content-Type` a
  `application/zip` (o el correcto) y `Content-Disposition` para forzar al
  navegador a descargar el archivo y darle un nombre.
- **Envío del Archivo:** Convierte el `Blob` recibido de Supabase a `Buffer` y
  lo envía como respuesta.
- **Manejo de Errores:** Captura errores en cada etapa (DB, Storage,
  inesperados) y responde con códigos de estado apropiados (500, 404, etc.).

**Notas de Seguridad:**

- **`SUPABASE_SERVICE_ROLE_KEY`:** Esta clave es muy poderosa. DEBE almacenarse
  como una variable de entorno SECRETA en tu entorno de producción y NUNCA debe
  ser expuesta al código del lado del cliente.
- **Verificación Doble:** La seguridad reside en la doble verificación:
  autenticación del usuario _y_ la consulta a `user_products` para verificar la
  compra _antes_ de intentar acceder al archivo.
- **No Exponer Rutas Directas:** La API Route es el único punto de acceso a los
  archivos privados. Nunca enlaces directamente a archivos en Supabase Storage
  desde el frontend a menos que uses URLs firmadas generadas _en el backend_.

---

### Paso 5: Implementación del Frontend (Página de Descargas del Dashboard)

Esta página muestra al usuario lo que ha comprado y cómo descargarlo.

**Archivo:** `pages/dashboard/downloads.tsx`

```typescript
import { GetServerSideProps } from "next";
import Head from "next/head";
import Link from "next/link"; // O usar un botón con JS para llamadas más complejas si es necesario
import { supabase } from "@/lib/supabase"; // Cliente estándar
import { Database } from "@/types/supabase";
import { getUser } from "@/utils/auth"; // Helper para obtener el usuario
import { User } from "@supabase/supabase-js";

// Definir tipos para los productos comprados
interface PurchasedProduct {
  product_id: string;
  // Puedes añadir más campos de user_products si los necesitas
}

interface DownloadsPageProps {
  user: User;
  purchasedProducts: PurchasedProduct[];
  error?: string;
}

// Usamos getServerSideProps para verificar la autenticación y cargar los datos en el servidor
export const getServerSideProps: GetServerSideProps<DownloadsPageProps> =
  async ({ req, res }) => {
    const user = await getUser({ req, res }); // Obtiene el usuario autenticado

    if (!user) {
      // Si no hay usuario, redirigir a la página de login
      return {
        redirect: {
          destination: "/login", // O la ruta de tu página de login
          permanent: false,
        },
      };
    }

    // Consultar los productos comprados por este usuario
    const { data, error } = await supabase
      .from("user_products")
      .select("product_id") // Selecciona solo el product_id que necesitamos para el mapeo
      .eq("user_id", user.id);

    if (error) {
      console.error("Error fetching purchased products:", error);
      return {
        props: {
          user,
          purchasedProducts: [],
          error:
            "Error al cargar tus productos comprados. Inténtalo de nuevo más tarde.",
        },
      };
    }

    return {
      props: {
        user,
        purchasedProducts: data || [],
      },
    };
  };

// Mapeo simple de product_id a nombres amigables para la UI
const productDisplayName: { [key: string]: string } = {
  "10xdev-full": "10xDev Full Boilerplate",
  "10xdev-advanced": "10xDev Advanced Package (UI & Email Templates)",
  // Agrega más mapeos
};

export default function DownloadsPage(
  { user, purchasedProducts, error }: DownloadsPageProps,
) {
  return (
    <div className="container mx-auto px-4 py-8">
      <Head>
        <title>Mis Descargas | 10xDev</title>
      </Head>

      <h1 className="text-3xl font-bold mb-6">Mis Descargas</h1>

      {error && <p className="text-red-500 mb-4">{error}</p>}

      {purchasedProducts.length === 0
        ? <p>No tienes productos comprados listos para descargar aún.</p>
        : (
          <ul className="space-y-4">
            {purchasedProducts.map((item) => {
              const displayTitle = productDisplayName[item.product_id] ||
                item.product_id;
              return (
                <li
                  key={item.product_id}
                  className="flex justify-between items-center bg-gray-100 p-4 rounded-card"
                >
                  <span className="text-lg font-semibold">{displayTitle}</span>
                  {/* Enlace que apunta a nuestra API Route segura */}
                  <Link href={`/api/download/${item.product_id}`} passHref>
                    <a className="px-4 py-2 bg-blue-600 text-white rounded-card hover:bg-blue-700 transition-colors">
                      Descargar
                    </a>
                  </Link>
                </li>
              );
            })}
          </ul>
        )}
    </div>
  );
}
```

**Explicación del Código Frontend:**

- **`getServerSideProps`:** Se ejecuta en el servidor antes de renderizar la
  página.
  - Verifica la autenticación del usuario usando `getUser`. Si no hay usuario,
    redirige al login.
  - Consulta la tabla `user_products` para obtener los `product_id` asociados al
    usuario logueado.
  - Pasa los datos del usuario y los productos comprados como `props` al
    componente de la página.
- **`DownloadsPage` Componente:**
  - Recibe `user` y `purchasedProducts` como props.
  - Muestra un título y una lista de los productos comprados.
  - Para cada producto, crea un `<a>` tag usando `next/link`.
  - El `href` del enlace apunta a nuestra API Route de descarga segura:
    `/api/download/${item.product_id}`. Cuando el usuario hace clic en este
    enlace, el navegador hará una petición `GET` a esa URL, activando nuestra
    lógica de backend.
  - Se incluye un mapeo simple `productDisplayName` para mostrar nombres de
    productos más amigables en la UI.

---

### Paso 6: Variables de Entorno

Asegúrate de tener configuradas las variables de entorno necesarias.

- `.env.local` (para desarrollo) y variables de entorno en tu proveedor de
  hosting (Vercel, Netlify, etc.) para producción.
- `NEXT_PUBLIC_SUPABASE_URL`: URL de tu proyecto Supabase (accesible
  públicamente).
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`: Clave `anon` pública de Supabase (accesible
  públicamente).
- **`SUPABASE_SERVICE_ROLE_KEY`:** La clave `service_role` de Supabase.
  **SECRETA** **Solo debe estar en el lado del servidor.**
- `STRIPE_SECRET_KEY`: Tu clave secreta de Stripe (SECRETA).
- `STRIPE_WEBHOOK_SECRET`: El secreto de firma de tu webhook de Stripe
  (SECRETA).

---

### Prueba y Despliegue

1 **Desarrollo:** Ejecuta tu proyecto localmente (`pnpm dev`). Sube un archivo
   `.zip` a tu bucket privado de Supabase Storage. Edita manualmente tu tabla
   `user_products` en Supabase para simular una compra (vinculando tu `user_id`
   a un `product_id` que tenga un archivo `.zip` asociado). Navega a
   `/dashboard/downloads` (asegúrate de estar logueado) y prueba la descarga.
2 **Producción:** Despliega tu código. Asegúrate de que las variables de
   entorno secretas estén configuradas correctamente en tu entorno de hosting.
   Realiza una compra real a través de tu flujo de Stripe para asegurarte de que
   el webhook registre la compra y puedas descargar el producto.


Implementación de un sistema robusto para permitir la descarga segura de archivos adquiridos, utilizando Next.js, Supabase Storage, y verificaciones de autorización.

Bienvenido a 10xDev

👨‍💻 Para Desarrolladores

🚀 Para Fundadores

🏢 Para Agencias

Componentes y Herramientas#

🎨 UI y Diseño

Bloques UI

Sistema de Temas

Templates de Email

⚡ Backend y Despliegue

Integraciones

Guías de Despliegue

SEO y Rendimiento