Tutorial/Next.js وTypeScript

أسعار الصرف في Next.js وTypeScript

اجلب أسعار الصرف من Server Component، وأبق مفتاح API على الخادم، وخزّن الاستجابة دون فقد وقت تحديث البيانات.

MMexchangerate.dev·Jul 17, 2026·قراءة 6 دقائق

استدع exchangerate.dev من Server Component أو Route Handler. يستطيع Next.js إعادة التحقق كل 60 ثانية، بينما تشرح source وmarket_session وdata_updated_at معنى السعر المخزن.

Key points
احتفظ بـEXCHANGERATE_API_KEY على الخادم فقط، من دون NEXT_PUBLIC_.
استخدم next: { revalidate: 60 } لتقليل الطلبات المتكررة.
اعرض data_updated_at بدل اعتبار timestamp وقت رصد السوق.
استخدم السعر الاسترشادي للعرض، واترك التسوية لمزود الدفع.

اجلب البيانات من الخادم

يعمل Server Component خارج المتصفح ويمكنه قراءة متغير خاص. يطلب المثال EUR وGBP مقابل USD ويتحقق من حالة HTTP.

typescript · app/page.tsxcopy
type LatestRates = {
  base: string;
  source: "live" | "ecb_daily" | "fred_daily";
  market_session: string;
  data_updated_at: string;
  rates: Record<string, number>;
};

async function getRates(): Promise<LatestRates> {
  const apiKey = process.env.EXCHANGERATE_API_KEY;
  if (!apiKey) throw new Error("EXCHANGERATE_API_KEY is missing");

  const response = await fetch(
    "https://api.exchangerate.dev/v1/latest/USD?symbols=EUR,GBP",
    {
      headers: { Authorization: `Bearer ${apiKey}` },
      next: { revalidate: 60 },
    },
  );

  if (!response.ok) {
    throw new Error(`FX request failed: ${response.status}`);
  }

  return response.json() as Promise<LatestRates>;
}

export default async function Page() {
  const fx = await getRates();

  return (
    <main>
      <p>1 USD = {fx.rates.EUR} EUR</p>
      <small>
        {fx.source} · {fx.market_session} · updated {fx.data_updated_at}
      </small>
    </main>
  );
}

خزّن الطلب واحتفظ بوقت الرصد

يحد next: { revalidate: 60 } مدة التخزين إلى 60 ثانية، لكنه لا يحول السعر المرجعي اليومي إلى سعر لحظي. احتفظ بـsource وmarket_session وdata_updated_at.

لا تكشف المفتاح
قد تدخل متغيرات NEXT_PUBLIC_ إلى حزمة المتصفح. اقرأ EXCHANGERATE_API_KEY في الخادم فقط.

افصل عملة العرض عن التسوية

يمكن للمتجر عرض سعر محلي تقريبي. يجب أن يأتي المبلغ النهائي من مزود الدفع لأنه يشمل الرسوم والفارق ووقت التسوية.

  • أبق المفتاح على الخادم.
  • خزّن الاستجابات الناجحة فقط.
  • اعرض المصدر ووقت الرصد.
  • احتفظ بالسعر والعملة الأصليين للتسوية.
MM
exchangerate.dev
أدلة تكامل للمطورين العاملين مع بيانات العملات.

Keep reading

Tutorialتحويل العملات في JavaScript وNode.jsRead Referenceقراءة source وmarket_sessionRead Guideالسعر الاسترشادي والتنفيذيRead