Snapkit Logo

Integrations-Übersicht#

Snapkit bietet offizielle Pakete für die nahtlose Integration mit beliebten JavaScript-Frameworks. Wählen Sie das Paket, das am besten zu Ihrem Technologie-Stack passt.

Verfügbare Integrationen#

React

Hochleistungs-React-Komponente mit automatischer Formaterkennung (AVIF, WebP, JPEG) und Next.js Image-Kompatibilität.

React-Dokumentation anzeigen →

Next.js

Nahtlose Next.js Image-Komponenten-Integration mit dynamischer DPR-basierter srcset-Generierung und 90%+ Testabdeckung.

Next.js-Dokumentation anzeigen →

Schneller Vergleich#

Funktion
React
Next.js
Paket
@snapkit-studio/react
@snapkit-studio/nextjs
Bundle-Größe
~9KB (optimiert) / ~22KB (vollständig)
~15KB
Image-Komponente
Unterstützt
Unterstützt
Provider-Pattern
Unterstützt
Unterstützt
SSR-Unterstützung
Mit Setup
Unterstützt
SSG-Unterstützung
Mit Setup
Unterstützt
ISR-Unterstützung
Nicht unterstützt
Unterstützt
App Router
N/A
Unterstützt
Pages Router
N/A
Unterstützt
Statische Imports
Nicht unterstützt
Unterstützt
Build-Time-Optimierung
Nicht unterstützt
Unterstützt
Automatisches Format
Unterstützt
Unterstützt
Visuelle Transformationen
Unterstützt
Unterstützt
TypeScript-Unterstützung
Unterstützt
Unterstützt

Kernfunktionen#

Alle Snapkit-Integrationen bieten diese Kernfunktionen:

🚀 Automatische Optimierung#

  • Format-Auswahl: Liefert automatisch WebP, AVIF oder das ursprüngliche Format basierend auf Browser-Unterstützung
  • Qualitätsanpassung: Dynamische Qualität basierend auf Netzwerkbedingungen
  • Responsive Bilder: Automatische srcset-Generierung für verschiedene Bildschirmgrößen

🎨 Bildtransformationen#

  • Größenänderung & Zuschnitt: Dynamische Größenänderung mit verschiedenen Anpassungsoptionen
  • Visuelle Effekte: Unschärfe, Graustufen, Schärfen und mehr
  • Format-Konvertierung: Konvertierung zwischen Formaten on-the-fly
  • Bereichsextraktion: Spezifische Bereiche aus Bildern extrahieren

⚡ Performance#

  • Lazy Loading: Eingebaute Intersection Observer-Unterstützung
  • Priority Loading: LCP-Optimierung mit prioritären Bildern
  • Progressive Enhancement: Fallback für nicht unterstützte Browser
  • CDN-Bereitstellung: Globale Edge-Network-Verteilung

🛠️ Entwicklererfahrung#

  • TypeScript-Unterstützung: Vollständige Typsicherheit und IntelliSense
  • Einfache API: Vertraute Komponenten-APIs
  • Flexible Konfiguration: Provider-Pattern oder pro-Bild-Konfiguration
  • Fehlerbehandlung: Elegante Fallbacks und Fehlerzustände

Installation#

Wählen Sie Ihr Framework und installieren Sie das entsprechende Paket:

# Für React-Anwendungen
npm install @snapkit-studio/react
 
# Für Next.js-Anwendungen
npm install @snapkit-studio/nextjs

Grundlegendes Verwendungsbeispiel#

Beide Pakete folgen ähnlichen Verwendungsmustern:

// React
import { Image } from '@snapkit-studio/react';
 
// Next.js
import { Image } from '@snapkit-studio/nextjs';
 
// Verwendung (identisch für beide)
<Image
  src="/hero.jpg"
  alt="Hero-Bild"
  width={800}
  height={600}
  priority
  transforms={{
    format: 'auto',
    quality: 85
  }}
/>

Provider-Konfiguration#

Konfiguration mit dem Provider-Pattern zentralisieren:

// React oder 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>

Welche Integration sollte ich verwenden?#

Wählen Sie React-Integration wenn:#

  • Sie eine React SPA (Single Page Application) entwickeln
  • Sie Create React App verwenden
  • Sie mit Vite + React arbeiten
  • Sie eine React-Bibliothek oder -Komponente entwickeln
  • Sie minimale Bundle-Größe benötigen (~9KB optimiert)

Wählen Sie Next.js-Integration wenn:#

  • Sie mit Next.js entwickeln (offensichtlich!)
  • Sie SSR/SSG/ISR-Unterstützung benötigen
  • Sie Build-Time-Optimierungen wollen
  • Sie App Router oder Pages Router verwenden
  • Sie statische Bildimports benötigen
  • Sie nahtlose Migration von next/image wollen

Bald verfügbar#

Wir arbeiten an offiziellen Integrationen für:

  • Vue.js - Vollständige Vue 3 Composition API-Unterstützung
  • Angular - Native Angular-Komponente
  • Svelte - SvelteKit-optimiertes Paket
  • Remix - Vollständige Remix Loader-Unterstützung
  • Gatsby - GraphQL und Build-Time-Optimierung

Ressourcen#

Brauchen Sie Hilfe?#