پلیر امن XAPlayer در Next.js

نمایش پلیر امن XAPlayer در یک کامپوننت سروری Next.js (App Router)؛ کلید API فقط روی سرور و توکن تازه برای هر بازدید.

در Next.js توکن را در یک کامپوننت سروری می‌گیرید؛ پس کلید API هیچ‌وقت به مرورگر نمی‌رسد. این نمونه برای App Router است.

پیش از شروع#

1. در پنل XAPlayer به «تنظیمات» بروید و در بخش «کلید API» یک کلید بسازید. کلید فقط یک بار نمایش داده می‌شود؛ همان لحظه کپی‌اش کنید.
2. در «سایت‌های مجاز برای نمایش پلیر» نشانی کامل سایت‌تان را اضافه کنید، مثلاً https://academy.example.com. اگر سایت با www هم باز می‌شود، آن را هم اضافه کنید.
3. شناسه‌ی دوره را بردارید: در «تنظیمات»، بخش «راهنمای نمایش پلیر در سایت شما» دوره را انتخاب کنید تا شناسه‌اش در نمونه‌کد نوشته شود. همان بخش آخر نشانی صفحه‌ی دوره در پنل هم هست.
4. بسته‌ی server-only را نصب کنید: npm install server-only

# .env.local (never prefix it with NEXT_PUBLIC_)
XAPLAYER_API_KEY=xap_sk_...

تابع سروری و صفحه#

// lib/xaplayer.ts
import 'server-only';

type Viewer = { id: string; name?: string; phone?: string };

export async function playerUrl(courseId: string, viewer: Viewer): Promise<string> {
  const res = await fetch('https://xaplayer.ir/api/v1/embed-tokens', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.XAPLAYER_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ courseId, viewer }),
    cache: 'no-store', // a fresh token for every visit
  });
  if (!res.ok) throw new Error(`XAPlayer ${res.status}`);
  const data: { url: string } = await res.json();
  return data.url;
}

اگر کار نکرد#