नेक्स्ट.js एज फंक्शन के साथ शुरुआत करें: परफॉरमेंस बढ़ाएं और लेटेंसी कम करें

नेक्स्ट.js फंक्शन क्या हैं? वे क्यों महत्वपूर्ण हैं?

आज, वर्सेल टीम ने नेक्स्ट.js एज फंक्शन की घोषणा की। एज फंक्शन डेवलपर्स को विश्व स्तर पर वितरित सर्वरों पर अपना कोड चलाने की अनुमति देते हैं। इसका मतलब है कि आपका कोड उस स्थान पर निष्पादित होगा जो आपके यूजर के सबसे करीब है। आप एज फंक्शन को सर्वरलेस फंक्शन के रूप में सोच सकते हैं जो CDN इंफ्रास्ट्रक्चर पर चलते हैं। एज फंक्शन के निम्नलिखित फायदे हैं:

• ग्लोबल लो लेटेंसी: क्योंकि कोड कई ग्लोबल लोकेशन (PoP: पॉइंट्स ऑफ प्रेजेंस) पर रेप्लिकेटेड होता है, दुनिया में कहीं भी यूजर कम लेटेंसी का अनुभव करेगा। प्रत्येक क्लाइंट निकटतम सर्वर से रिस्पॉन्स प्राप्त करेगा।
• कोई कोल्ड स्टार्ट नहीं: एज इंफ्रास्ट्रक्चर प्रोवाइडर V8 आइसोलेट्स का उपयोग करते हैं जो कोल्ड स्टार्ट को समाप्त करते हैं। इसका मतलब है बहुत तेज़ स्टार्टअप।

नेक्स्ट.js फंक्शन के साथ शुरुआत करें

यहां हम एक नेक्स्ट.js एज फंक्शन लिखेंगे जो क्लाइंट के स्थान के आधार पर एक कस्टम ग्रीटिंग दिखाएगा। हम ग्रीटिंग मैसेज को अपस्टैश रेडिस से लोड करेंगे।

रेपो और डेमो देखें।

1. नेक्स्ट.js एप्लिकेशन बनाएं और अपस्टैश रेडिस इंस्टॉल करें:

npx create-next-app@latest --typescript
cd nextjs-edge
npm install @upstash/redis

2. एक रेडिस डेटाबेस बनाएं:

सबसे अच्छी एज लेटेंसी के लिए अपस्टैश कंसोल में एक ग्लोबल डेटाबेस बनाएं। redis-cli के साथ अपने डेटाबेस से कनेक्ट करें और नीचे दिए अनुसार कुछ ग्रीटिंग डेटा जोड़ें:

global-promoted-chicken-30286.upstash.io:30286> set GB "Ey up?" OK
global-promoted-chicken-30286.upstash.io:30286> set US "Yo, what's up?" OK
global-promoted-chicken-30286.upstash.io:30286> set TR "Naber dostum?" OK
global-promoted-chicken-30286.upstash.io:30286> set DE "Was ist los?" OK
global-promoted-chicken-30286.upstash.io:30286> set IN "Namaste" OK

3. एज फंक्शन बनाएं:

नीचे दिए अनुसार pages/api/_middleware.ts बनाएं:

import type { NextFetchEvent, NextRequest } from "next/server";
import { Redis } from "@upstash/redis";

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  const country = req.geo.country || "US";
  const redis = new Redis({
    url: "UPSTASH_REDIS_REST_URL",
    token: "UPSTASH_REDIS_REST_TOKEN",
  });
  const result = await redis.get<string>(country);
  const greeting = result || "Hello World!";
  return new Response(greeting);
}

अपस्टैश कंसोल में अपने डेटाबेस पेज से UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN कॉपी करके बदलें।

4. चलाएं और डिप्लॉय करें:

अपने एप्लिकेशन को स्थानीय रूप से चलाएं:

npm run dev

चेक करें: https://localhost:3000/api/hello

आप देखेंगे कि req.geo परिभाषित नहीं है। अपने ऐप को वर्सेल पर डिप्लॉय करें ताकि आप देख सकें कि यह एज इंफ्रास्ट्रक्चर पर कैसे काम कर रहा है:

vercel deploy

चेक करें: https://nextjs-edge-enesakar-upstash.vercel.app/api/hello

आप VPN का उपयोग करके विभिन्न स्थानों से ग्रीटिंग की जांच कर सकते हैं।

निष्कर्ष

नेक्स्ट.js एज विश्व स्तर पर तेज़ एप्लिकेशन बनाने वाले डेवलपर्स के लिए अच्छी खबर है। अपस्टैश रेडिस एक डेटा सर्विस है जिसे एज फंक्शन के लिए डिज़ाइन और अनुकूलित किया गया है।

यहां उपयोगी लिंक्स:

• नेक्स्ट.js एज फंक्शन डॉक्यूमेंटेशन: https://vercel.com/docs/concepts/functions/edge-functions
• नेक्स्ट.js एज उदाहरण: https://github.com/vercel/examples/tree/main/edge-functions

ट्विटर या डिस्कॉर्ड पर अपने विचार बताएं।