統合の概要#

Snapkitは人気のJavaScriptフレームワークとのシームレスな統合のための公式パッケージを提供しています。あなたの技術スタックに最適なパッケージを選択してください。

利用可能な統合#

簡単な比較#

コア機能#

すべてのSnapkit統合が提供するコア機能：

🚀 自動最適化#

• フォーマット選択: ブラウザサポートに基づいてWebP、AVIF、または元のフォーマットを自動提供
• 品質調整: ネットワーク状況に基づく動的品質調整
• レスポンシブ画像: 異なる画面サイズ用の自動srcset生成

🎨 画像変換#

• リサイズ＆クロップ: 様々なフィットオプションを持つ動的サイズ調整
• 視覚効果: ブラー、グレースケール、シャープニングなど
• フォーマット変換: オンザフライでのフォーマット間変換
• 領域抽出: 画像から特定の領域を抽出

⚡ パフォーマンス#

• 遅延読み込み: 組み込みIntersection Observerサポート
• 優先読み込み: 優先画像によるLCP最適化
• プログレッシブエンハンスメント: 対応していないブラウザ向けのフォールバック
• CDN配信: グローバルエッジネットワーク配信

🛠️ 開発者体験#

• TypeScriptサポート: 完全な型安全性とIntelliSense
• シンプルなAPI: 親しみやすいコンポーネントAPI
• 柔軟な設定: Providerパターンまたは画像ごとの設定
• エラーハンドリング: 優雅なフォールバックとエラー状態

インストール#

フレームワークを選択して対応するパッケージをインストールしてください：

# Reactアプリケーション用
npm install @snapkit-studio/react
 
# Next.jsアプリケーション用
npm install @snapkit-studio/nextjs

基本的な使用例#

両方のパッケージは似たような使用パターンに従います：

// React
import { Image } from '@snapkit-studio/react';
 
// Next.js
import { Image } from '@snapkit-studio/nextjs';
 
// 使用法（両方とも同じ）
<Image
  src="/hero.jpg"
  alt="ヒーロー画像"
  width={800}
  height={600}
  priority
  transforms={{
    format: 'auto',
    quality: 85
  }}
/>

Provider設定#

Providerパターンで設定を一元化：

// Reactまたは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>

どの統合を使うべきか？#

React統合を選ぶ場合：#

• React SPA（Single Page Application）を構築する場合
• Create React Appを使用する場合
• Vite + Reactで作業する場合
• Reactライブラリやコンポーネントを構築する場合
• 最小限のバンドルサイズが必要な場合（〜9KB最適化版）

Next.js統合を選ぶ場合：#

• Next.jsで構築する場合（当然ですが！）
• SSR/SSG/ISRサポートが必要な場合
• ビルド時最適化が必要な場合
• App RouterまたはPages Routerを使用する場合
• 静的画像インポートが必要な場合
• next/imageからのシームレスな移行を希望する場合

近日公開#

以下のための公式統合を作業中です：

• Vue.js - 完全なVue 3 Composition APIサポート
• Angular - ネイティブAngularコンポーネント
• Svelte - SvelteKit最適化パッケージ
• Remix - 完全なRemix loaderサポート
• Gatsby - GraphQLとビルド時最適化

リソース#

• GitHubリポジトリ↗
• APIドキュメント
• Reactライブデモ↗
• Next.jsライブデモ↗
• Reactデモソースコード↗
• Next.jsデモソースコード↗

ヘルプが必要ですか？#

• スタートガイドをチェック
• 画像変換ドキュメントを参照
• GitHub Discussions↗を訪問