استدع exchangerate.dev من Server Component أو Route Handler، وليس من شفرة المتصفح التي تحوي المفتاح. يستطيع Next.js إعادة التحقق كل 60 ثانية، بينما تشرح source وmarket_session وdata_updated_at معنى السعر المخزن.
EXCHANGERATE_API_KEY على الخادم فقط، من دون NEXT_PUBLIC_.next: { revalidate: 60 } لتقليل الطلبات المتكررة.data_updated_at بدل اعتبار timestamp وقت رصد السوق.اجلب البيانات من الخادم
يعمل Server Component خارج المتصفح ويمكنه قراءة متغير خاص. يطلب المثال EUR وGBP مقابل USD ويتحقق من حالة HTTP.
type LatestRates = {
base: string;
source: "live" | "ecb_daily" | "market_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 في الخادم فقط.افصل عملة العرض عن التسوية
يمكن للمتجر عرض سعر محلي تقريبي. يجب أن يأتي المبلغ النهائي من مزود الدفع لأنه يشمل الرسوم والفارق ووقت التسوية.
- أبق المفتاح على الخادم.
- خزّن الاستجابات الناجحة فقط.
- اعرض المصدر ووقت الرصد.
- احتفظ بالسعر والعملة الأصليين للتسوية.
