> העתק ציבורי של מדריך המפתחים של ViewStream (לקריאה גם על ידי סוכני AI). רשימת המדריכים: https://www.viewstream.co.il/he/developers/guide/index.md · תיעוד ה-API: https://api.viewstream.co.il/docs/

# Next.js ו-Vercel

`@viewstream/next` מחבר אתר Next.js ‏(App Router) ל-ViewStream ומוכן ל-Vercel. קוד המקור, אתר הבסיס והתיעוד המלא:
`integrations/nextjs` (קובץ README) במאגר של ViewStream.

| ייבוא | מה |
|---|---|
| `@viewstream/next/client` | `<ViewStreamPlayer>`, `<ViewStreamVertical>` (קליפי AI אנכיים 9:16), `<ViewStreamUpload>` (העלאה ישירה מהדפדפן) |
| `@viewstream/next/server` | `createViewStream()` (פונקציות API עם תגיות מטמון של Next), `createDelivery()` (ה-API של האתרים), Connect |
| `@viewstream/next/webhook` | `viewstreamWebhook()` — נתיב webhook חתום שמרענן את הדפים שהשתנו |

## הגדרה ב-Vercel

1. צרו מפתח API (Studio ← **אינטגרציות** ← **מפתחות API**) עם `assets:read`, `clips:read`, `channels:read`,
   `ai:read`; הוסיפו `assets:write` להעלאות ו-`playback:sign` לשידורים מוגנים.
2. הוסיפו ב-Vercel את משתני הסביבה `VIEWSTREAM_API_KEY`, `VIEWSTREAM_TENANT`, `VIEWSTREAM_WEBHOOK_SECRET` (ולפי הצורך
   `VIEWSTREAM_CHANNEL`, `VIEWSTREAM_LANG`, `VIEWSTREAM_SITE_ORIGIN`). לעולם אל תחשפו את המפתח עם הקידומת `NEXT_PUBLIC_`.
   העלאות כבויות כל עוד לא הגדרתם `VIEWSTREAM_UPLOAD_PASSWORD` (עורכים נכנסים ב-`/upload`); באתר אמיתי שימו אותן מאחורי
   מערכת הכניסה שלכם — כל מי שמגיע לאתר יכול לקרוא ל-server action.
3. הוסיפו webhook ‏(Studio ← **אינטגרציות** ← **Webhooks**) לכתובת `https://<האתר-שלכם>/api/viewstream/webhook` עם
   `asset.published`, `clip.final`, `artifact.published`.

## קריאות נפוצות

```tsx
import { createViewStream } from '@viewstream/next/server';
import { ViewStreamPlayer } from '@viewstream/next/client';
const vs = createViewStream();

const video = await vs.assets.get(id);
<ViewStreamPlayer tenant={await vs.tenant()} kind="vod" id={video.id} lang="he" />

const hits = await vs.catchup.search(channelId, 'ריבית');               // items[].moments[{offset_s, text}]
const p = await vs.programmes.get(programmeId);                         // playback.catch_up
<ViewStreamPlayer tenant={t} mode="embed" src={p.playback.catch_up} fromProgrammeStart start={hits.items[0].moments[0].offset_s} />

const summary = await vs.programmes.summary(programmeId);               // תקציר, מגישים מאומתים, נושאים
const articles = await vs.articles.list();                              // כתבות AI שפורסמו
const { src } = await vs.signPlayback({ channel: 'main' }, { viewer_ip }); // שידורים מוגנים
```

```ts
// app/api/viewstream/webhook/route.ts
import { viewstreamWebhook } from '@viewstream/next/webhook';
export const POST = viewstreamWebhook({ secret: process.env.VIEWSTREAM_WEBHOOK_SECRET! });
```

נתיב ה-webhook בודק את `X-VS-Signature` ‏(HMAC-SHA256 על `"<X-VS-Timestamp>.<גוף הבקשה>"`, חלון של 300 שניות, השוואה בזמן
קבוע) ומרענן את תגיות המטמון של הסרטון, הקליפ או הכתבה שפורסמו — הדף מתעדכן מיד.

## העלאות ו-Connect

- **העלאות** עוברות מהדפדפן ישירות לאחסון של ViewStream בחלקים של 64MB עם אסימון העלאה בלבד; השרת שלכם פותח ומסיים
  אותן (`startBrowserUpload` / `completeBrowserUpload`). דורש מפתח שנוצר ב-Connect.
- **Connect** מאפשר לכל לקוח לחבר את חשבון ה-ViewStream שלו (PKCE, קוד חד-פעמי, מפתח מוגבל שאפשר לבטל) בלי להדביק
  מפתח: `pkce()`, `connectUrl()`, `exchangeCode()`, `disconnect()`.