Redis और NextAuth के साथ अपने Next.js ब्लॉग के लिए एक सुरक्षित टिप्पणी प्रणाली बनाएं

हम इस ट्यूटोरियल में आपके ब्लॉग के लिए एक टिप्पणी अनुभाग बनाएंगे। हम जिस तकनीकी स्टैक का उपयोग करेंगे वह है:

1. NextJS 13 (App dir में)
2. NextAuth (प्रमाणीकरण के लिए)
3. Upstash Redis (टिप्पणियों को संग्रहीत करने के लिए)
4. SWR (टिप्पणियों के कैशिंग और पुनर्सत्यापन के लिए)

शुरू करते हैं।

NextAuth के साथ प्रमाणीकरण संभालना

सबसे पहले, हम बस किसी को भी टिप्पणी पोस्ट नहीं करने दे सकते, है ना? कोई आपके ब्लॉग को टिप्पणियों से स्पैम करने के लिए बस एक स्क्रिप्ट चला सकता है। आइए लोगों को टिप्पणी पोस्ट करने देने से पहले एक प्रमाणीकरण प्रणाली बनाएं। हम NextAuth का उपयोग करेंगे।

अपने प्रोजेक्ट में next-auth इंस्टॉल करें।

pnpm install next-auth

यह App Directory के अंदर निर्देशिका संरचना है

. ├── app │ ├── api │ │ └── auth │ │ └── [...nextauth] │ │ └── route.ts │ ├── blog │ │ ├── page.tsx │ │ └── [...slug] │ │ └── page.tsx │ ├── components │ │ └── LoginButton.tsx │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx 

हमारा Auth API रूट सेट करें:

// 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 OAuth एप्लिकेशन बनाएं ताकि GITHUB_CLIENT_ID और GITHUB_CLIENT_SECRET प्राप्त कर सकें।

अब, NextAuth आपको next-auth से signIn और signOut फ़ंक्शन का उपयोग करके किसी भी क्लाइंट कंपोनेंट से साइन इन और साइन आउट करने की अनुमति देता है। लेकिन उससे पहले, आपको एक कॉन्टेक्स्ट प्रोवाइडर सेट अप करना होगा जो आपके पूरे एप्लिकेशन को लपेटता है।

// 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 आपको एप्लिकेशन में किसी भी क्लाइंट कंपोनेंट से सत्र स्थिति तक पहुंचने की अनुमति देगा।

आप next-auth से useSession हुक का उपयोग करके सत्र स्थिति तक पहुंच सकते हैं। यहां लॉगिन बटन के लिए एक नमूना है:

"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> ); }

इसके साथ, हमारी प्रमाणीकरण प्रणाली लागू है। अब आइए Redis डेटाबेस में टिप्पणियों को संग्रहीत करने के लिए सर्वर-साइड रूट शुरू करें।

Redis डेटाबेस सेट अप करना

1. Upstash पर जाएं और एक Redis डेटाबेस बनाएं।
2. अपने उपयोगकर्ताओं के करीब एक क्षेत्र चुनें और TLS एन्क्रिप्शन का विकल्प चुनें।
3. @upstash/redis पैकेज इंस्टॉल करें।

pnpm install @upstash/redis

4. इन टोकन को अपने .env.local में कॉपी करें।

आइए अब इस निर्देशिका संरचना में हमारे API एंडपॉइंट लिखें:

. ├── app │ ├── api │ │ ├── auth │ │ │ └── [...nextauth] │ │ │ └── route.ts │ │ ├── comment │ │ │ ├── delete │ │ │ │ └── route.ts │ │ │ ├── get │ │ │ │ └── route.ts │ │ │ └── post │ │ │ └── route.ts │ │ └── lib │ │ ├── getUser.ts │ │ └── redis.ts 

1. एक Redis क्लाइंट इंस्टेंस बनाएं

// app/api/lib/redis.ts import { Redis } from "@upstash/redis"; /* यह process.env का उपयोग करके आपके पर्यावरण से UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN लोड करने का प्रयास करता है */ const redis = Redis.fromEnv(); export default redis;

बस इतना ही। हमारा Redis क्लाइंट अब सेट अप है और जो कुछ बचा है वह हमारे एप्लिकेशन में इसके लिए API रूट सेट अप करना है।

हम टिप्पणियों को संग्रहीत करने के लिए Redis Lists का उपयोग करेंगे। वे एक स्टैक के रूप में कार्य कर सकते हैं ताकि सबसे हालिया टिप्पणी शीर्ष पर प्रदर्शित हो। निश्चित रूप से, हम क्लाइंट साइड पर सॉर्टिंग लॉजिक भी लागू कर सकते हैं लेकिन जब Redis पहले से ही यह डेटा संरचना प्रदान करता है, तो आइए इसका उपयोग करें।

आप यहां पूरा कोड देख सकते हैं। यहां इसका सार है:

1. एक टिप्पणी बनाएं: redis.lpush(referer, comment). यह referer कुंजी वाली सूची में टिप्पणी को पुश करेगा

2. सभी टिप्पणियां प्राप्त करें redis.lrange(referer, 0, -1)

3. एक टिप्पणी हटाएं redis.lrem(referer, 0, comment). यह referer कुंजी वाली सूची में comment की सभी घटनाओं को हटा देगा।

हमारा API अब लागू है। आइए फ्रंटएंड को बैकएंड के साथ एकीकृत करने पर जाएं।

क्लाइंट साइड सेट अप करना

यह इतना कठिन नहीं है। हमें बस उन एंडपॉइंट को हिट करने की आवश्यकता है जिन्हें हमने अभी बनाया है fetch का उपयोग करके। हम टिप्पणियों के कैशिंग और पुनर्सत्यापन के लिए swr नामक एक लाइब्रेरी का उपयोग करेंगे। लेकिन बेझिझक इसके लिए React Query जैसी अन्य लाइब्रेरी का उपयोग करें।

हम एक 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;

अब हमारा टिप्पणी अनुभाग पूरा हो गया है। हम टिप्पणियों को लाने, पोस्ट करने और हटाने में सक्षम हैं। अगले कदम टिप्पणी बॉक्स और टिप्पणी सूची के लिए कंपोनेंट बनाना होंगे। यहां एक पूरा नमूना है