Next.js Edge Functions के साथ शुरुआत करना

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

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

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

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

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

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

1 एक Next.js एप्लिकेशन बनाएं और Upstash Redis इंस्टॉल करें:

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

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

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

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 एज फंक्शन बनाएं:

नीचे दिए गए अनुसार पेज/एपीआई/_मिडलवेयर.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 Upstash कंसोल में अपने डेटाबेस पेज से।

4 चलाएँ और परिनियोजित करें:

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

npm run dev

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

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

vercel deploy

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

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

निष्कर्ष

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

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

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

हमें Twitter या Discord पर अपने विचार बताएं।