কম্পিউটার

Next.js এজ ফাংশন দিয়ে শুরু করা

Next.js ফাংশন কি? কেন তারা গুরুত্বপূর্ণ?

আজ, Vercel টিম Next.js Edge ফাংশন ঘোষণা করেছে। এজ ফাংশন ডেভেলপারদের বিশ্বব্যাপী বিতরণ করা সার্ভারে তাদের কোড চালানোর অনুমতি দেয়। এর অর্থ হল আপনার কোডটি আপনার ব্যবহারকারীর সবচেয়ে কাছের অবস্থানে কার্যকর করা হবে। আপনি প্রান্ত ফাংশনগুলিকে সার্ভারহীন ফাংশন হিসাবে ভাবতে পারেন যা CDN অবকাঠামোতে চালিত হয়। এজ ফাংশনগুলির নিম্নলিখিত সুবিধা রয়েছে:

  • গ্লোবাল লো লেটেন্সি:যেহেতু কোডটি অনেক গ্লোবাল লোকেশনে প্রতিলিপি করা হয়েছে (PoP:উপস্থিতির পয়েন্ট), বিশ্বের যেকোনো জায়গায় একজন ব্যবহারকারী কম লেটেন্সি অনুভব করবেন। প্রতিটি ক্লায়েন্ট নিকটতম সার্ভার থেকে প্রতিক্রিয়া আনবে।
  • কোল্ড স্টার্ট নেই:এজ ইনফ্রাস্ট্রাকচার প্রোভাইডাররা V8 আইসোলেট ব্যবহার করে যা ঠান্ডা শুরুকে দূর করে। এর মানে অনেক দ্রুত স্টার্টআপ।

Next.js ফাংশন দিয়ে শুরু করা

এখানে আমরা একটি Next.js এজ ফাংশন লিখব যা ক্লায়েন্টের অবস্থানের উপর নির্ভর করে একটি কাস্টম অভিবাদন দেখাবে। আমরা Upstash Redis থেকে শুভেচ্ছা বার্তা লোড করব।

রেপো এবং ডেমো পরীক্ষা করুন।

1 একটি Next.js অ্যাপ্লিকেশন তৈরি করুন এবং Upstash Redis ইনস্টল করুন:

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

2 একটি রেডিস ডাটাবেস তৈরি করুন:

Upstash কনসোলে সেরা প্রান্ত বিলম্বের জন্য একটি গ্লোবাল ডাটাবেস তৈরি করুন। 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 প্রান্ত ফাংশন তৈরি করুন:

নিচের মত পেজ/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-এ স্থাপন করুন:

vercel deploy

চেক করুন:https://nextjs-edge-enesakar-upstash.vercel.app/api/hello

আপনি একটি VPN ব্যবহার করে বিভিন্ন অবস্থান থেকে অভিবাদন পরীক্ষা করতে পারেন৷

উপসংহার

Next.js এজ ডেভেলপারদের জন্য দারুণ খবর যারা বিশ্বব্যাপী দ্রুত অ্যাপ্লিকেশন তৈরি করছেন। Upstash Redis হল একটি ডেটা পরিষেবা যা প্রান্ত ফাংশনগুলির জন্য ডিজাইন এবং অপ্টিমাইজ করা হয়েছে৷

এখানে দরকারী লিঙ্ক:

  • Next.js এজ ফাংশন ডকুমেন্টেশন:https://vercel.com/docs/concepts/functions/edge-functions
  • Next.js Edge উদাহরণ:https://github.com/vercel/examples/tree/main/edge-functions

টুইটার বা ডিসকর্ডে আপনার চিন্তা আমাদের জানান।


  1. Nuxt 3 এবং সার্ভারলেস রেডিস দিয়ে শুরু করা

  2. Apple TV+

  3. ওয়েবের জন্য Android মেসেজ দিয়ে শুরু করা

  4. Xen ভার্চুয়ালাইজেশন দিয়ে শুরু করা