Snapkit Logo

Resumen de Integraciones#

Snapkit proporciona paquetes oficiales para una integración perfecta con frameworks JavaScript populares. Elige el paquete que mejor se adapte a tu stack tecnológico.

Integraciones Disponibles#

React

Componente React de alto rendimiento con detección automática de formato (AVIF, WebP, JPEG) y compatibilidad con Next.js Image.

Ver Documentación de React →

Next.js

Integración perfecta del componente Next.js Image con generación dinámica de srcset basada en DPR y cobertura de pruebas del 90%+.

Ver Documentación de Next.js →

Comparación Rápida#

Característica
React
Next.js
Paquete
@snapkit-studio/react
@snapkit-studio/nextjs
Tamaño del Bundle
~9KB (optimizado) / ~22KB (completo)
~15KB
Componente Image
Soportado
Soportado
Patrón Provider
Soportado
Soportado
Soporte SSR
Con configuración
Soportado
Soporte SSG
Con configuración
Soportado
Soporte ISR
No soportado
Soportado
App Router
N/A
Soportado
Pages Router
N/A
Soportado
Imports Estáticos
No soportado
Soportado
Optimización Build-Time
No soportado
Soportado
Formato Automático
Soportado
Soportado
Transformaciones Visuales
Soportado
Soportado
Soporte TypeScript
Soportado
Soportado

Características Principales#

Todas las integraciones de Snapkit proporcionan estas características principales:

🚀 Optimización Automática#

  • Selección de Formato: Sirve automáticamente WebP, AVIF o formato original basado en el soporte del navegador
  • Ajuste de Calidad: Calidad dinámica basada en condiciones de red
  • Imágenes Responsivas: Generación automática de srcset para diferentes tamaños de pantalla

🎨 Transformaciones de Imágenes#

  • Redimensionado y Recorte: Dimensionado dinámico con varias opciones de ajuste
  • Efectos Visuales: Desenfoque, escala de grises, nitidez y más
  • Conversión de Formato: Convertir entre formatos al vuelo
  • Extracción de Región: Extraer regiones específicas de imágenes

⚡ Rendimiento#

  • Lazy Loading: Soporte integrado de Intersection Observer
  • Priority Loading: Optimización LCP con imágenes prioritarias
  • Progressive Enhancement: Fallback para navegadores no soportados
  • Entrega CDN: Distribución de red edge global

🛠️ Experiencia del Desarrollador#

  • Soporte TypeScript: Seguridad de tipos completa e IntelliSense
  • API Simple: APIs de componentes familiares
  • Configuración Flexible: Patrón provider o configuración por imagen
  • Manejo de Errores: Fallbacks elegantes y estados de error

Instalación#

Elige tu framework e instala el paquete correspondiente:

# Para aplicaciones React
npm install @snapkit-studio/react
 
# Para aplicaciones Next.js
npm install @snapkit-studio/nextjs

Ejemplo de Uso Básico#

Ambos paquetes siguen patrones de uso similares:

// React
import { Image } from '@snapkit-studio/react';
 
// Next.js
import { Image } from '@snapkit-studio/nextjs';
 
// Uso (idéntico para ambos)
<Image
  src="/hero.jpg"
  alt="Imagen hero"
  width={800}
  height={600}
  priority
  transforms={{
    format: 'auto',
    quality: 85
  }}
/>

Configuración del Provider#

Centraliza la configuración con el patrón provider:

// React o Next.js
import { SnapkitProvider } from '@snapkit-studio/[react|nextjs]';
 
<SnapkitProvider
  baseUrl="https://your-cdn.snapkit.studio"
  organizationName="your-org"
  defaultQuality={85}
  defaultFormat="auto"
>
  <YourApp />
</SnapkitProvider>

¿Qué Integración Debería Usar?#

Elige la integración de React si:#

  • Estás construyendo una React SPA (Single Page Application)
  • Usas Create React App
  • Trabajas con Vite + React
  • Construyes una biblioteca o componente React
  • Necesitas un tamaño de bundle mínimo (~9KB optimizado)

Elige la integración de Next.js si:#

  • Construyes con Next.js (¡obviamente!)
  • Necesitas soporte SSR/SSG/ISR
  • Quieres optimizaciones build-time
  • Usas App Router o Pages Router
  • Necesitas imports de imágenes estáticas
  • Quieres migración perfecta desde next/image

Próximamente#

Estamos trabajando en integraciones oficiales para:

  • Vue.js - Soporte completo de Vue 3 Composition API
  • Angular - Componente Angular nativo
  • Svelte - Paquete optimizado para SvelteKit
  • Remix - Soporte completo del Remix loader
  • Gatsby - GraphQL y optimización build-time

Recursos#

¿Necesitas Ayuda?#