<पी> हम इस ट्यूटोरियल में आपके ब्लॉग के लिए एक टिप्पणी अनुभाग बनाएंगे। टेक स्टैक हम होंगे: - नेक्स्टजेएस 13 (ऐप डीआईआर में)
- NextAuth (प्रमाणीकरण के लिए)
- अपस्टैश रेडिस (टिप्पणियाँ संग्रहीत करने के लिए)
- SWR (कैशिंग और टिप्पणियों के पुनर्वैधीकरण के लिए)
<पी> चलिए शुरू करते हैं. नेक्स्टऑथ के साथ ऑथ को संभालना
<पी> सबसे पहले, हम किसी को भी टिप्पणी पोस्ट करने की अनुमति नहीं दे सकते, है ना? कोई आपके ब्लॉग पर टिप्पणियों को स्पैम करने के लिए कोई स्क्रिप्ट चला सकता है। आइए लोगों को टिप्पणी पोस्ट करने देने से पहले एक प्रमाणीकरण प्रणाली बनाएं। हम NextAuth का उपयोग करेंगे. <पी> next-auth इंस्टॉल करें आपके प्रोजेक्ट में. pnpm install next-auth
<पी> यह ऐप डायरेक्टरी के अंदर निर्देशिका संरचना है .
├── app
│ ├── api
│ │ └── auth
│ │ └── [...nextauth]
│ │ └── route.ts
│ ├── blog
│ │ ├── page.tsx
│ │ └── [...slug]
│ │ └── page.tsx
│ ├── components
│ │ └── LoginButton.tsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
<पी> हमारा प्रामाणिक एपीआई रूट सेट करें: // app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
const handler = NextAuth({
providers: [
GithubProvider({
clientId: process.env.GITHUB_CLIENT_ID!,
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
}),
],
callbacks: {
async session({ session, token }) {
if (session && session.user && token.sub) {
session.user.sub = token.sub;
}
return session;
},
},
});
export { handler as GET, handler as POST };
<पी> GITHUB_CLIENT_ID प्राप्त करने के लिए यहां से एक नया Github OAuth एप्लिकेशन बनाएं और GITHUB_CLIENT_SECRET . <पी> 
<पी> अब, NextAuth आपको signIn का उपयोग करके किसी भी क्लाइंट घटक से साइन इन और साइनआउट करने की अनुमति देता है और signOut next-auth से कार्य करता है . लेकिन इससे पहले, आपको एक संदर्भ प्रदाता स्थापित करना होगा जो आपके संपूर्ण एप्लिकेशन को कवर करता है। // app/layout.tsx
"use client";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<SessionProvider>
<body>{children}</body>
</SessionProvider>
</html>
);
}
<पी> SessionProvider आपको एप्लिकेशन में किसी भी क्लाइंट घटक से सत्र स्थिति तक पहुंचने की अनुमति देगा। <पी> आप useSession का उपयोग करके सत्र स्थिति तक पहुंच सकते हैं next-auth से हुक . यहां लॉगिन बटन का एक नमूना है: "use Client";
import { signIn, signOut, useSession } from "next-auth/react";
export default function LoginButton() {
const { data: session } = useSession();
if (session) {
return (
<div>
Signed in as {session.user?.name} using {session.user?.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</div>
);
}
return (
<div>
Not signed in <br />
<button onClick={() => signIn()}> Sign in </button>
</div>
);
}
<पी> इसके साथ, हमारी प्रामाणिक प्रणाली लागू है। अब रेडिस डेटाबेस में टिप्पणियों को संग्रहीत करने के लिए सर्वर साइड रूट शुरू करते हैं। रेडिस डेटाबेस की स्थापना
- अपस्टैश पर जाएं और एक रेडिस डेटाबेस बनाएं।
- अपने उपयोगकर्ताओं के नजदीक एक क्षेत्र चुनें और टीएलएस एन्क्रिप्शन का विकल्प चुनें।
- इंस्टॉल करें
@upstash/redis पैकेज.
pnpm install @upstash/redis
<पी> 
- इन टोकन को अपने
.env.local में कॉपी करें .
<पी> आइए अब इस निर्देशिका संरचना में अपने एपीआई एंडपॉइंट लिखें: .
├── app
│ ├── api
│ │ ├── auth
│ │ │ └── [...nextauth]
│ │ │ └── route.ts
│ │ ├── comment
│ │ │ ├── delete
│ │ │ │ └── route.ts
│ │ │ ├── get
│ │ │ │ └── route.ts
│ │ │ └── post
│ │ │ └── route.ts
│ │ └── lib
│ │ ├── getUser.ts
│ │ └── redis.ts
- एक रेडिस क्लाइंट इंस्टेंस बनाएं
// app/api/lib/redis.ts
import { Redis } from "@upstash/redis";
/*
This tries to load UPSTASH_REDIS_REST_URL
and UPSTASH_REDIS_REST_TOKEN from your environment
using process.env
*/
const redis = Redis.fromEnv();
export default redis;
<पी> बस यही था. हमारा रेडिस क्लाइंट अब सेट हो गया है और जो कुछ बचा है वह हमारे एप्लिकेशन में इसके लिए APIroutes सेट करना है। <पी> हम टिप्पणियों को संग्रहीत करने के लिए रेडिस सूचियों का उपयोग करेंगे। वे एक स्टैक के रूप में कार्य कर सकते हैं इसलिए नवीनतम टिप्पणी शीर्ष पर प्रदर्शित होती है। ज़रूर, हम सॉर्टिंग लॉजिक क्लाइंट साइड को भी लागू कर सकते हैं लेकिन जब रेडिस पहले से ही यह डेटा संरचना प्रदान करता है, तो आइए इसका उपयोग करें। <पी> आप पूरा कोड यहां देख सकते हैं. इसका सार इस प्रकार है: - <पी> एक टिप्पणी बनाएं:
redis.lpush(referer, comment) . यह टिप्पणी को कुंजी referer वाली सूची में धकेल देगा
- <पी> सभी टिप्पणियाँ प्राप्त करें
redis.lrange(referer, 0, -1)
- <पी> एक टिप्पणी हटाएं
redis.lrem(referer, 0, comment) . इससे comment की सभी घटनाएं हट जाएंगी सूची में कुंजी referer के साथ .
<पी> हमारी एपीआई अब जगह पर है। आइए फ्रंटएंड को बैकएंड के साथ एकीकृत करें। क्लाइंट साइड सेट करना
<पी> यह उतना कठिन नहीं है. हमें बस उन अंतिम बिंदुओं तक पहुंचने की जरूरत है जिन्हें हमने अभी fetch का उपयोग करके बनाया है .हम swr नामक लाइब्रेरी का उपयोग करेंगे टिप्पणियों की कैशिंग और पुनर्वैधीकरण के लिए। लेकिन इसके लिए रिएक्ट क्वेरी जैसी अन्य लाइब्रेरी का उपयोग करने में संकोच न करें। <पी> हम एक useComment() बनाते हैं हुक जिसमें onSubmit() होगा और onDelete() अनुरोध करने के लिए हैंडलर। "use client";
import { useState } from "react";
import type { Comment } from "@/app/interfaces/interfaces";
import useSWR from "swr";
const fetcher = (url: string) => fetch(url).then((res) => res.json());
const useComment = () => {
const [text, setText] = useState("");
const { data: comments, mutate } = useSWR<Comment[]>(
"/api/comment/get",
fetcher,
{
fallbackData: [],
},
);
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
try {
await fetch("/api/comment/post", {
method: "POST",
body: JSON.stringify({ text }),
headers: {
"Content-Type": "application/json",
},
});
setText("");
await mutate();
} catch (error) {
console.log(error);
}
};
const onDelete = async (comment: Comment) => {
try {
await fetch("/api/comment/delete", {
method: "POST",
body: JSON.stringify({ comment }),
headers: {
"Content-Type": "application/json",
},
});
await mutate();
} catch (error) {
console.log(error);
}
};
return { text, setText, comments, onSubmit, onDelete };
};
export default useComment;
<पी> अब हमारा टिप्पणी अनुभाग पूरा हो गया है। हम टिप्पणियाँ लाने, पोस्ट करने और हटाने में सक्षम हैं। अगला कदम टिप्पणी बॉक्स और टिप्पणी सूची के लिए घटक बनाना होगा। यहां एक पूरा नमूना है
