@adstage/web-sdk 1.1.0

package/examples/react-nextjs/app/page.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+// @ts-ignore - SDK 로컬 경로 사용
+import { AdType, useAdStage } from '../../../dist/index.esm.js';
+
+export default function HomePage() {
+  const { sdk, isLoading, error, isInitialized } = useAdStage();
+  const [message] = useState('Next.js와 AdStage SDK 테스트 페이지입니다!');
+  const [metrics, setMetrics] = useState({
+    bannerLoaded: false,
+    sliderLoaded: false,
+    eventsTracked: 0
+  });
+
+  // SDK 초기화 후 자동으로 광고 로드
+  useEffect(() => {
+    if (isInitialized && sdk) {
+      console.log('SDK 초기화 완료, 광고 로드를 시작합니다');
+      loadAdvertisements();
+    }
+  }, [isInitialized, sdk]);
+
+  const loadAdvertisements = async () => {
+    if (!sdk) return;
+
+    try {
+      // 배너 광고 로드
+      await sdk.createSlot(
+        'banner-slot-main',
+        'banner-container',
+        AdType.BANNER,
+        {
+          width: '100%',
+          height: 200,
+          autoSlideInterval: 5,
+          sliderEffect: 'fade'
+        }
+      );
+      setMetrics(prev => ({ ...prev, bannerLoaded: true }));
+      console.log('배너 광고 로드 완료');
+
+      // 슬라이더 광고 로드
+      await sdk.createSlot(
+        'slider-slot-main',
+        'slider-container',
+        AdType.SLIDER,
+        {
+          width: 400,
+          height: 200,
+          autoSlideInterval: 3,
+          sliderEffect: 'slide'
+        }
+      );
+      setMetrics(prev => ({ ...prev, sliderLoaded: true }));
+      console.log('슬라이더 광고 로드 완료');
+
+    } catch (error) {
+      console.error('광고 로드 실패:', error);
+    }
+  };
+
+  const trackTestEvent = () => {
+    if (!sdk) return;
+
+    try {
+      // trackEvent 메서드가 있다면 사용
+      if (typeof (sdk as any).trackEvent === 'function') {
+        (sdk as any).trackEvent('test_button_click', {
+          button_name: 'test_event',
+          timestamp: new Date().toISOString(),
+          page: 'nextjs_example'
+        });
+        setMetrics(prev => ({ ...prev, eventsTracked: prev.eventsTracked + 1 }));
+        console.log('테스트 이벤트 추적 완료');
+      } else {
+        console.warn('trackEvent 메서드를 찾을 수 없습니다');
+      }
+    } catch (error) {
+      console.error('이벤트 추적 실패:', error);
+    }
+  };
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-red-50">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-red-600 mb-4">SDK 초기화 오류</h1>
+          <p className="text-red-500">{error}</p>
+          <button 
+            onClick={() => window.location.reload()} 
+            className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            페이지 새로고침
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        {/* 헤더 */}
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+            AdStage SDK Next.js 예제
+          </h1>
+          <p className="text-lg text-gray-600">
+            {message}
+          </p>
+        </div>
+
+        {/* 상태 패널 */}
+        <div className="bg-white rounded-lg shadow p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">SDK 상태</h2>
+          <div className="space-y-3">
+            <div className="flex items-center">
+              <div className={`w-3 h-3 rounded-full mr-3 ${
+                isInitialized ? 'bg-green-500' : isLoading ? 'bg-yellow-500' : 'bg-red-500'
+              }`}></div>
+              <span className="font-medium">
+                {isLoading ? 'SDK 초기화 중...' : isInitialized ? 'SDK 초기화 완료' : 'SDK 초기화되지 않음'}
+              </span>
+            </div>
+            <div className="flex items-center">
+              <div className={`w-3 h-3 rounded-full mr-3 ${
+                metrics.bannerLoaded ? 'bg-green-500' : 'bg-gray-300'
+              }`}></div>
+              <span className="font-medium">
+                배너 광고: {metrics.bannerLoaded ? '로드됨' : '대기 중'}
+              </span>
+            </div>
+            <div className="flex items-center">
+              <div className={`w-3 h-3 rounded-full mr-3 ${
+                metrics.sliderLoaded ? 'bg-green-500' : 'bg-gray-300'
+              }`}></div>
+              <span className="font-medium">
+                슬라이더 광고: {metrics.sliderLoaded ? '로드됨' : '대기 중'}
+              </span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-3 h-3 rounded-full mr-3 bg-blue-500"></div>
+              <span className="font-medium">
+                추적된 이벤트: {metrics.eventsTracked}개
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* 설정 정보 */}
+        <div className="bg-white rounded-lg shadow p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">설정 정보</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="text-gray-600">API Key:</span>
+              <div className="font-mono text-xs mt-1 p-2 bg-gray-100 rounded">
+                7dfddcfda637fbb73225bac3731688b80b90675942fe9f2057a88e2379aba2a4
+              </div>
+            </div>
+            <div>
+              <span className="text-gray-600">Framework:</span>
+              <div className="font-medium mt-1">Next.js 14 (App Router)</div>
+            </div>
+            <div>
+              <span className="text-gray-600">SDK Version:</span>
+              <div className="font-medium mt-1">@adstage/web-sdk (로컬 빌드)</div>
+            </div>
+            <div>
+              <span className="text-gray-600">패턴:</span>
+              <div className="font-medium mt-1">Context Provider</div>
+            </div>
+          </div>
+        </div>
+
+        {/* 컨트롤 패널 */}
+        <div className="bg-white rounded-lg shadow p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">테스트 컨트롤</h2>
+          <div className="flex flex-wrap gap-4">
+            <button 
+              onClick={loadAdvertisements}
+              disabled={!isInitialized || isLoading}
+              className="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+            >
+              광고 다시 로드
+            </button>
+            <button 
+              onClick={trackTestEvent}
+              disabled={!isInitialized || isLoading}
+              className="bg-green-500 hover:bg-green-600 disabled:bg-gray-300 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+            >
+              테스트 이벤트 추적
+            </button>
+          </div>
+        </div>
+
+        {/* 테스트 영역 */}
+        <div className="bg-white rounded-lg shadow p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">테스트 영역</h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* 배너 컨테이너 */}
+            <div>
+              <h3 className="text-lg font-medium mb-3">
+                배너 광고 영역 
+                {metrics.bannerLoaded && <span className="text-green-600 text-sm ml-2">✓ 로드됨</span>}
+              </h3>
+              <div 
+                id="banner-container" 
+                className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-gray-50 min-h-[200px] flex items-center justify-center"
+              >
+                {isLoading ? (
+                  <span className="text-blue-500">SDK 초기화 중...</span>
+                ) : metrics.bannerLoaded ? (
+                  <span className="text-green-600">배너 광고 로드 완료</span>
+                ) : (
+                  <span className="text-gray-500">배너 광고 대기 중</span>
+                )}
+              </div>
+            </div>
+
+            {/* 슬라이더 컨테이너 */}
+            <div>
+              <h3 className="text-lg font-medium mb-3">
+                슬라이더 광고 영역
+                {metrics.sliderLoaded && <span className="text-green-600 text-sm ml-2">✓ 로드됨</span>}
+              </h3>
+              <div 
+                id="slider-container" 
+                className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-gray-50 min-h-[200px] flex items-center justify-center"
+              >
+                {isLoading ? (
+                  <span className="text-blue-500">SDK 초기화 중...</span>
+                ) : metrics.sliderLoaded ? (
+                  <span className="text-green-600">슬라이더 광고 로드 완료</span>
+                ) : (
+                  <span className="text-gray-500">슬라이더 광고 대기 중</span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 가이드 */}
+        <div className="bg-blue-50 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-blue-900 mb-4">실시간 로그</h3>
+          <div className="bg-gray-900 text-green-400 rounded p-4 font-mono text-sm">
+            <div>→ API Key: 7dfddcfda637fbb73225bac3731688b80b90675942fe9f2057a88e2379aba2a4</div>
+            <div>→ SDK 상태: {isLoading ? '초기화 중...' : isInitialized ? '초기화 완료' : '대기 중'}</div>
+            <div>→ 배너 광고: {metrics.bannerLoaded ? '로드됨' : '대기 중'}</div>
+            <div>→ 슬라이더 광고: {metrics.sliderLoaded ? '로드됨' : '대기 중'}</div>
+            <div>→ 추적된 이벤트: {metrics.eventsTracked}개</div>
+            <div className="text-yellow-400">→ 브라우저 콘솔에서 더 자세한 로그를 확인하세요</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/react-nextjs/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+  transpilePackages: ['@adstage/web-sdk'],
+}
+
+module.exports = nextConfig

package/examples/react-nextjs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "adstage-nextjs-example",
+  "version": "1.0.0",
+  "description": "AdStage SDK Next.js 통합 예제",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/examples/react-nextjs/pnpm-lock.yaml

@@ -0,0 +1,343 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      next:
+        specifier: ^14.0.0
+        version: 14.2.31(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react:
+        specifier: ^18.0.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.0.0
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@types/node':
+        specifier: ^20.0.0
+        version: 20.19.11
+      '@types/react':
+        specifier: ^18.0.0
+        version: 18.3.23
+      '@types/react-dom':
+        specifier: ^18.0.0
+        version: 18.3.7(@types/react@18.3.23)
+      typescript:
+        specifier: ^5.0.0
+        version: 5.9.2
+
+packages:
+
+  '@next/env@14.2.31':
+    resolution: {integrity: sha512-X8VxxYL6VuezrG82h0pUA1V+DuTSJp7Nv15bxq3ivrFqZLjx81rfeHMWOE9T0jm1n3DtHGv8gdn6B0T0kr0D3Q==}
+
+  '@next/swc-darwin-arm64@14.2.31':
+    resolution: {integrity: sha512-dTHKfaFO/xMJ3kzhXYgf64VtV6MMwDs2viedDOdP+ezd0zWMOQZkxcwOfdcQeQCpouTr9b+xOqMCUXxgLizl8Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@14.2.31':
+    resolution: {integrity: sha512-iSavebQgeMukUAfjfW8Fi2Iz01t95yxRl2w2wCzjD91h5In9la99QIDKcKSYPfqLjCgwz3JpIWxLG6LM/sxL4g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@14.2.31':
+    resolution: {integrity: sha512-XJb3/LURg1u1SdQoopG6jDL2otxGKChH2UYnUTcby4izjM0il7ylBY5TIA7myhvHj9lG5pn9F2nR2s3i8X9awQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@14.2.31':
+    resolution: {integrity: sha512-IInDAcchNCu3BzocdqdCv1bKCmUVO/bKJHnBFTeq3svfaWpOPewaLJ2Lu3GL4yV76c/86ZvpBbG/JJ1lVIs5MA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@14.2.31':
+    resolution: {integrity: sha512-YTChJL5/9e4NXPKW+OJzsQa42RiWUNbE+k+ReHvA+lwXk+bvzTsVQboNcezWOuCD+p/J+ntxKOB/81o0MenBhw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@14.2.31':
+    resolution: {integrity: sha512-A0JmD1y4q/9ufOGEAhoa60Sof++X10PEoiWOH0gZ2isufWZeV03NnyRlRmJpRQWGIbRkJUmBo9I3Qz5C10vx4w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@14.2.31':
+    resolution: {integrity: sha512-nowJ5GbMeDOMzbTm29YqrdrD6lTM8qn2wnZfGpYMY7SZODYYpaJHH1FJXE1l1zWICHR+WfIMytlTDBHu10jb8A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-ia32-msvc@14.2.31':
+    resolution: {integrity: sha512-pk9Bu4K0015anTS1OS9d/SpS0UtRObC+xe93fwnm7Gvqbv/W1ZbzhK4nvc96RURIQOux3P/bBH316xz8wjGSsA==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@14.2.31':
+    resolution: {integrity: sha512-LwFZd4JFnMHGceItR9+jtlMm8lGLU/IPkgjBBgYmdYSfalbHCiDpjMYtgDQ2wtwiAOSJOCyFI4m8PikrsDyA6Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.5':
+    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
+
+  '@types/node@20.19.11':
+    resolution: {integrity: sha512-uug3FEEGv0r+jrecvUUpbY8lLisvIjg6AAic6a2bSP5OEOLeJsDSnvhCDov7ipFFMXS3orMpzlmi0ZcuGkBbow==}
+
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
+  '@types/react@18.3.23':
+    resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  caniuse-lite@1.0.30001735:
+    resolution: {integrity: sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  next@14.2.31:
+    resolution: {integrity: sha512-Wyw1m4t8PhqG+or5a1U/Deb888YApC4rAez9bGhHkTsfwAy4SWKVro0GhEx4sox1856IbLhvhce2hAA6o8vkog==}
+    engines: {node: '>=18.17.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      sass:
+        optional: true
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  styled-jsx@5.1.1:
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  typescript@5.9.2:
+    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+snapshots:
+
+  '@next/env@14.2.31': {}
+
+  '@next/swc-darwin-arm64@14.2.31':
+    optional: true
+
+  '@next/swc-darwin-x64@14.2.31':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@14.2.31':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@14.2.31':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@14.2.31':
+    optional: true
+
+  '@next/swc-linux-x64-musl@14.2.31':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@14.2.31':
+    optional: true
+
+  '@next/swc-win32-ia32-msvc@14.2.31':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@14.2.31':
+    optional: true
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.5':
+    dependencies:
+      '@swc/counter': 0.1.3
+      tslib: 2.8.1
+
+  '@types/node@20.19.11':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/prop-types@15.7.15': {}
+
+  '@types/react-dom@18.3.7(@types/react@18.3.23)':
+    dependencies:
+      '@types/react': 18.3.23
+
+  '@types/react@18.3.23':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      csstype: 3.1.3
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  caniuse-lite@1.0.30001735: {}
+
+  client-only@0.0.1: {}
+
+  csstype@3.1.3: {}
+
+  graceful-fs@4.2.11: {}
+
+  js-tokens@4.0.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  nanoid@3.3.11: {}
+
+  next@14.2.31(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@next/env': 14.2.31
+      '@swc/helpers': 0.5.5
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001735
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.1(react@18.3.1)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.2.31
+      '@next/swc-darwin-x64': 14.2.31
+      '@next/swc-linux-arm64-gnu': 14.2.31
+      '@next/swc-linux-arm64-musl': 14.2.31
+      '@next/swc-linux-x64-gnu': 14.2.31
+      '@next/swc-linux-x64-musl': 14.2.31
+      '@next/swc-win32-arm64-msvc': 14.2.31
+      '@next/swc-win32-ia32-msvc': 14.2.31
+      '@next/swc-win32-x64-msvc': 14.2.31
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  picocolors@1.1.1: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
+  source-map-js@1.2.1: {}
+
+  streamsearch@1.1.0: {}
+
+  styled-jsx@5.1.1(react@18.3.1):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.3.1
+
+  tslib@2.8.1: {}
+
+  typescript@5.9.2: {}
+
+  undici-types@6.21.0: {}

package/examples/react-nextjs/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}