Lee के ब्लॉग से प्रेरित, जहां हर ब्लॉग पोस्ट उसके व्यू की संख्या दिखाता है, मैं अपने पेज के लिए भी कुछ ऐसा ही करना चाहता था। मैं नए ऐप राउटर के साथ Next.js 13 का भी उपयोग कर रहा हूं लेकिन पेज व्यू को MySQL डेटाबेस में संग्रहीत करने के बजाय, मैं Upstash Redis का उपयोग करूंगा।
यहां एक उदाहरण है कि हम क्या बनाने जा रहे हैं। होम पेज पर प्रत्येक कार्ड उसके व्यू की संख्या दिखाएगा।
Redis क्यों?
Redis पहले से ही 2 बेहतरीन कमांड के साथ आता है जो काउंटर को डिडुप्लिकेट और इंक्रीमेंट करना तुच्छ बनाते हैं।
एक अधिक सटीक काउंटर प्राप्त करने के लिए, मैं काउंटर के इंक्रीमेंट को डिबाउंस करना चाहता हूं। यदि कोई यूजर पेज को रीफ्रेश करता है, तो काउंटर को केवल एक बार बढ़ाया जाना चाहिए। हम Redis के SET कमांड का उपयोग करके इसे बहुत आसानी से कर सकते हैं। इसमें एक NX विकल्प है जो कुंजी को केवल तभी सेट करेगा यदि वह अभी तक मौजूद नहीं है और एक EX विकल्प है जो दिए गए सेकंड की मात्रा के बाद कुंजी को समाप्त कर देगा। इन दोनों विकल्पों को संयोजित करके हम यह सुनिश्चित कर सकते हैं कि एक ही यूजर दिए गए समय सीमा के भीतर काउंटर को कई बार न बढ़ाए।
दूसरा कमांड INCR है जो किसी दिए गए कुंजी को परमाणु रूप से 1 से बढ़ा देगा।
Redis सेटअप करना
Upstash पर डेटाबेस सेटअप करना आसान है और इसमें प्रतिदिन 10k अनुरोध फ्री शामिल हैं! आप यहां एक नया डेटाबेस बना सकते हैं। इसमें सचमुच केवल कुछ सेकंड लगते हैं। बाद में नीचे स्क्रॉल करें और REST कनेक्शन सीक्रेट को अपनी .env.local फाइल में कॉपी करें:
.env.local
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=Next.js
अब हमारे पास एक Redis डेटाबेस है, हम काउंटर को लागू करना शुरू कर सकते हैं। हमें पहले @upstash/redis इंस्टॉल करना होगा:
pnpm add @upstash/redisपेज व्यू को संग्रहीत करने के लिए, हमें दो घटकों की आवश्यकता है। एक API रूट और एक क्लाइंट कंपोनेंट। आइए API रूट से शुरू करते हैं।
/api/incr.ts
Upstash और @upstash/redis Vercel के एज फंक्शन के साथ संगत हैं, इसलिए सबसे पहले, हम वह सब कुछ आयात करेंगे जिसकी हमें आवश्यकता है, Redis सेटअप करेंगे, और रनटाइम को edge पर कॉन्फिगर करेंगे।
/api/incr.ts नाम से एक नई फाइल बनाएं और निम्न कोड जोड़ें:
/api/incr.ts
import { NextRequest, NextResponse } from "next/server";
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();
export const config = {
runtime: "edge",
};अब हमें अनुरोध बॉडी में पास किए गए स्लग या समान पहचानकर्ता की आवश्यकता होगी। यदि यह मौजूद नहीं है, तो हम 400 स्टेटस कोड वापस करेंगे।
/api/incr.ts
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 });
}
// और कोड यहां आएगा
}फिर हमें यूजर का IP एड्रेस प्राप्त करने की भी आवश्यकता है। हम req.ip प्रॉपर्टी का उपयोग करके ऐसा कर सकते हैं। हम SHA-256 एल्गोरिदम का उपयोग करके IP एड्रेस को हैश करेंगे और इसे डेटाबेस में संग्रहीत करेंगे। इस तरह हमें IP एड्रेस को सीधे संग्रहीत करने की आवश्यकता नहीं है, जो सुरक्षा चिंता का विषय हो सकता है।
/api/incr.ts
const ip = req.ip;
// IP को हैश करें और इसे हेक्स स्ट्रिंग में बदलें
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 कमांड का उपयोग करें। NX और EX के साथ SET का उपयोग करके हमें यह जांचने का एक आसान तरीका मिलता है कि क्या कोई विशिष्ट IP एड्रेस पिछले 24 घंटों में एक पेज देख रहा है:
/api/incr.ts
const isNew = await redis.set(["deduplicate", hash, slug].join(":"), true, {
nx: true,
ex: 24 * 60 * 60,
});
if (!isNew) {
new NextResponse(null, { status: 202 });
}अंतिम कार्य दिए गए स्लग के लिए काउंटर को बढ़ाना है। हम इसके लिए INCR कमांड का उपयोग करेंगे:
/api/incr.ts
await redis.incr(["pageviews", "projects", slug].join(":"));
return new NextResponse(null, { status: 202 });संदर्भ के लिए, आप यहां पूरा कोड पा सकते हैं
/app/[slug]/view.tsx
अब, आइए एक छोटा क्लाइंट कंपोनेंट बनाएं, जो जब भी माउंट होता है तो हमारे द्वारा अभी बनाए गए API रूट पर एक अनुरोध भेजता है। इस कंपोनेंट को तब किसी भी पेज में एम्बेड किया जा सकता है जिसे हम ट्रैक करना चाहते हैं।
/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 कंपोनेंट को जोड़ना है जिसे हम ट्रैक करना चाहते हैं:
/app/[slug]/page.tsx
import { ReportView } from "./view";
type Props = {
params: {
slug: string;
};
};
export default function Page({ params }: Props) {
return (
<div>
<ReportView slug={params.slug} />
{/* यहाँ अपना पेज कंटेंट जोड़ें */}
</div>
);
}अब से /app/[slug] पर सभी विज़िट को ट्रैक किया जाएगा और पिछले 24 घंटों में प्रत्येक यूनिक विज़िटर के लिए काउंटर बढ़ाया जाएगा।
व्यू प्रदर्शित करना
व्यू को ट्रैक करना अच्छा है, लेकिन हम उन्हें सार्वजनिक रूप से प्रदर्शित भी करना चाहते हैं। आइए देखें कि हम ऐसा कैसे कर सकते हैं।
व्यू की संख्या प्रदर्शित करने के लिए, हमें उन्हें डेटाबेस से देखना होगा। हम GET कमांड का उपयोग करके ऐसा कर सकते हैं। हमें पेज कंपोनेंट में एक revalidate कॉन्फिग भी जोड़ना चाहिए, ताकि पेज हर अनुरोध के लिए नहीं बल्कि हर 60 सेकंड में पुनः मान्य हो।
/app/[slug]/page.tsx
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 पर बताएं।
