নেক্সট.জেএস এজ ফাংশন দিয়ে শুরু করুন: পারফরম্যান্স বাড়ান এবং লেটেন্সি কমান

Next.js ফাংশন কী? এগুলো কেন গুরুত্বপূর্ণ? 🤔

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

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

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

এখানে আমরা একটি Next.js এজ ফাংশন লিখব যা ক্লায়েন্টের লোকেশন বেসড একটি কাস্টম গ ریটিং দেখাবে। আমরা গ রিটিং মেসেজ আপস্ট্যাশ রেডিস থেকে লোড করব।

রিপো এবং ডেমো চেক করুন।

1 একটি Next.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(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

আপনি ভিপিএন ব্যবহার করে ভিন্ন লোকেশন থেকে গ রিটিং চেক করতে পারেন।

উপসংহার 🎯

Next.js Edge বিশ্বব্যাপী দ্রুত অ্যাপ্লিকেশন বিল্ড করার ডেভেলপারদের জন্য দুর্দান্ত খবর। আপস্ট্যাশ রেডিস একটি ডেটা সার্ভিস যা এজ ফাংশন জন্য ডিজাইন ও অপ্টিমাইজড।

উপকারী লিঙ্কগুলো:

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

টুইটার বা ডিসকর্ড-এ আপনার মতামত জানান।