Upstash Redis সহ আপনার Next.js ব্লগে একটি ভিউ কাউন্টার যোগ করুন

লি-এর ব্লগ থেকে অনুপ্রাণিত হয়ে, যেখানে প্রতিটি ব্লগ পোস্টে দেখা হয়েছে তার সংখ্যা দেখায়, আমি আমার পেজের জন্য অনুরূপ কিছু করতে চেয়েছিলাম। আমি নতুন অ্যাপ রাউটারের সাথে Next.js 13ও ব্যবহার করছি কিন্তু একটি mysql ডাটাবেসে পেজ ভিউ সংরক্ষণ করার পরিবর্তে, আমি Upstash Redis ব্যবহার করব।

আমরা কী তৈরি করব তার একটি উদাহরণ এখানে দেওয়া হল৷ হোম পেজে থাকা প্রতিটি কার্ড এটির ভিউ সংখ্যা দেখাবে৷

কেন রেডিস?

Redis ইতিমধ্যেই 2টি দুর্দান্ত কমান্ড নিয়ে এসেছে যা এটিকে তুচ্ছ করে তোলে অনুলিপি এবং একটি কাউন্টার বৃদ্ধি করতে৷

একটি আরো সঠিক কাউন্টার পেতে, আমি কাউন্টারের বৃদ্ধি ডিবাউন্স করতে চাই। একজন ব্যবহারকারী পৃষ্ঠাটি রিফ্রেশ করলে, কাউন্টারটি শুধুমাত্র একবার বৃদ্ধি করা উচিত। আমরা Redis' SET দিয়ে এটি সত্যিই সহজে করতে পারি আদেশ এটিতে NX আছে বিকল্প যা শুধুমাত্র কী সেট করবে যদি এটি এখনও বিদ্যমান না থাকে এবং একটি EX বিকল্প যা নির্দিষ্ট সেকেন্ডের পরে কীটির মেয়াদ শেষ হবে। এই দুটি বিকল্পকে একত্রিত করে আমরা নিশ্চিত করতে পারি যে কোনো একক ব্যবহারকারী একটি নির্দিষ্ট সময়সীমার মধ্যে একাধিকবার পাল্টা সংখ্যা বৃদ্ধি না করে।

দ্বিতীয় কমান্ডটি হল INCR যা একটি প্রদত্ত কীকে পারমাণবিকভাবে 1 দ্বারা বৃদ্ধি করবে।

Redis সেট আপ করা হচ্ছে

Upstash-এ একটি ডাটাবেস সেট আপ করা সহজ এবং বিনামূল্যে প্রতিদিন 10k অনুরোধ অন্তর্ভুক্ত করে! আপনি এখানে একটি নতুন ডাটাবেস তৈরি করতে পারেন। এটি আক্ষরিকভাবে মাত্র কয়েক সেকেন্ড সময় নেয়। তারপর নিচে স্ক্রোল করুন এবং REST কপি করুন আপনার .env.local এর সাথে সংযোগ গোপনীয়তা ফাইল:

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

Next.js

এখন যেহেতু আমাদের একটি রেডিস ডাটাবেস আছে, আমরা কাউন্টার বাস্তবায়ন শুরু করতে পারি। আমাদের প্রথমে @upstash/redis ইনস্টল করতে হবে:

pnpm add @upstash/redis

পৃষ্ঠার দৃশ্য সংরক্ষণ করার জন্য, আমাদের দুটি উপাদান প্রয়োজন। একটি এপিআই রুট এবং ক্লায়েন্ট উপাদান। এপিআই রুট দিয়ে শুরু করা যাক।

/api/incr.ts

Upstash এবং @upstash/redis Vercel এর এজ ফাংশনগুলির সাথে সামঞ্জস্যপূর্ণ, প্রথমত, আমরা আমাদের যা কিছু প্রয়োজন তা আমদানি করব, পুনরায় সেটআপ করব এবং দ্য রানটাইমকে edge হিসাবে কনফিগার করব। .

একটি নতুন ফাইল তৈরি করুন /api/incr.ts এবং নিম্নলিখিত কোড যোগ করুন:

import { NextRequest, NextResponse } from "next/server";
 
import { Redis } from "@upstash/redis";
 
const redis = Redis.fromEnv();
 
export const config = {
 runtime: "edge",
};

পরবর্তীতে অনুরোধবডিতে পাস করার জন্য আমাদের একটি স্লাগ বা অনুরূপ শনাক্তকারীর প্রয়োজন হবে। এটি উপস্থিত না থাকলে, আমরা একটি 400 ফেরত দেব স্ট্যাটাস কোড।

export default async function incr(req: NextRequest): Promise<NextResponse> {
 const body = await req.json();
 const slug = body.slug as string | undefined;
 if (!slug) {
 return new NextResponse("Slug not found", { status: 400 });
 }
 
 // more to come here
}

তারপর আমাদের ব্যবহারকারীর আইপি ঠিকানাও পেতে হবে। আমরা req.ip ব্যবহার করে এটি করতে পারি সম্পত্তি আমরা SHA-256 ব্যবহার করে IP ঠিকানা হ্যাশ করব অ্যালগরিদম এবং ডাটাবেসে সংরক্ষণ করুন। এইভাবে আমাদের সরাসরি আইপি ঠিকানা সংরক্ষণ করতে হবে না, যা একটি নিরাপত্তা উদ্বেগ হতে পারে।

const ip = req.ip;
// Hash the IP and turn it into a hex string
const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(ip));
const hash = Array.from(new Uint8Array(buf))
 .map((b) => b.toString(16).padStart(2, "0"))
 .join("");

এখন উপরে উল্লিখিত প্রথম redis কমান্ডটি ব্যবহার করা যাক। SET ব্যবহার করা হচ্ছে একসাথে NX এবং EX একটি নির্দিষ্ট আইপি ঠিকানা গত 24 ঘন্টার মধ্যে একটি পৃষ্ঠা দেখছে কিনা তা পরীক্ষা করার একটি সহজ উপায় দেয়:

const isNew = await redis.set(["deduplicate", hash, slug].join(":"), true, {
 nx: true,
 ex: 24 * 60 * 60,
});
if (!isNew) {
 new NextResponse(null, { status: 202 });
}

শেষ জিনিসটি হল প্রদত্ত স্লাগের জন্য কাউন্টারটি বৃদ্ধি করা। আমরা INCR ব্যবহার করব এর জন্য কমান্ড:

await redis.incr(["pageviews", "projects", slug].join(":"));
return new NextResponse(null, { status: 202 });

রেফারেন্সের জন্য, আপনি এখানে সম্পূর্ণ কোডটি খুঁজে পেতে পারেন

/app/[slug]/view.tsx

এর পরে, আসুন একটি ছোট ক্লায়েন্ট উপাদান তৈরি করি, যেটি এপিআই রুটে একটি অনুরোধ পাঠায় যা আমরা তৈরি করেছি যখনই এটি মাউন্ট হয়। এই উপাদানটি তারপরে আমরা ট্র্যাক করতে চাই এমন যেকোনো পৃষ্ঠায় এম্বেড করা যেতে পারে।

"use client";
 
import { useEffect } from "react";
 
export const ReportView: React.FC<{ slug: string }> = ({ slug }) => {
 useEffect(() => {
 fetch("/api/incr", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify({ slug }),
 });
 }, [slug]);
 
 return null;
};

/app/[slug]/page.tsx

আমাদের যা করতে হবে তা হল ReportView যোগ করা পৃষ্ঠার উপাদান যা আমরা ট্র্যাক করতে চাই:

import { ReportView } from "./view";
 
type Props = {
 params: {
 slug: string;
 };
};
 
export default function Page({ params }: Props) {
 return (
 <div>
 <ReportView slug={params.slug} />
 {/* Add your page content here */}
 </div>
 );
}

এখন থেকে /app/[slug]-এ সমস্ত ভিজিট ট্র্যাক করা হবে এবং গত 24 ঘন্টায় প্রতিটি অনন্য দর্শকের জন্য কাউন্টার বৃদ্ধি করা হবে৷

দর্শন প্রদর্শন করা হচ্ছে

ভিউ ট্র্যাক করা চমৎকার, কিন্তু আমরা সেগুলি সর্বজনীনভাবে প্রদর্শন করতে চাই৷ দেখা যাক কিভাবে আমরা এটা করতে পারি।

ভিউ সংখ্যা প্রদর্শন করার জন্য, আমাদের ডাটাবেস থেকে তাদের সন্ধান করতে হবে। আমরা GET ব্যবহার করে এটি করতে পারি আদেশ আমাদের একটি revalidate যোগ করা উচিত পৃষ্ঠার উপাদানে কনফিগার করুন, যাতে পৃষ্ঠাটি প্রতি 60 সেকেন্ডে পুনরায় যাচাই করা হয় এবং প্রতিটি অনুরোধের জন্য নয়।

type Props = {
 params: {
 slug: string;
 };
};
 
export const revalidate = 60
 
export default function Page({ params }: Props) {
 const views = await redis.get<number>(["pageviews", "projects", params.slug].join(":")) ?? 0
 
 return ...
}

শেষ শব্দ

chronark.com এ এর একটি সম্পূর্ণ উদাহরণ দেখুন। কোডটি GitHub-এ উপলব্ধ। বিশেষ করে, এখানে প্রাসঙ্গিক বিটগুলি রয়েছে:

• api রুট
• ট্র্যাকিং উপাদান
• দর্শনের সংখ্যা লোড হচ্ছে

আপনি যদি আরও পৃষ্ঠা দেখার বিশ্লেষণে আগ্রহী হন, তাহলে অনুগ্রহ করে আমাদের Twitter বা Discord-এ জানান।