আমরা এই টিউটোরিয়ালে আপনার ব্লগের জন্য একটি মন্তব্য বিভাগ তৈরি করব। টেক স্ট্যাক আমরা হব:
- NextJS 13 (App dir-এ)
- NextAuth (প্রমাণিকরণের জন্য)
- Upstash Redis (মন্তব্য সংরক্ষণের জন্য)
- SWR (কমেন্টের ক্যাশিং এবং রিভালিডেশনের জন্য)
চলুন শুরু করা যাক।
NextAuth এর সাথে প্রমাণীকরণ পরিচালনা করা
প্রথমত, আমরা কাউকে একটি মন্তব্য পোস্ট করতে দিতে পারি না, তাই না? কেউ মন্তব্য সহ আপনার ব্লগ স্প্যাম করতে একটি স্ক্রিপ্ট চালাতে পারে৷ লোকেদের একটি মন্তব্য পোস্ট করার আগে আসুন প্রথমে একটি প্রমাণীকরণ সিস্টেম তৈরি করি। আমরা 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
আমাদের 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_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>
);
}এর সাথে, আমাদের প্রমাণীকরণ ব্যবস্থা চালু আছে। এখন রেডিস ডাটাবেসে মন্তব্য সংরক্ষণের জন্য সার্ভার সাইড রুট শুরু করা যাক।
রেডিস ডেটাবেস সেট আপ করা হচ্ছে
- আপস্ট্যাশে যান এবং একটি রেডিস ডেটাবেস তৈরি করুন।
- আপনার ব্যবহারকারীদের কাছাকাছি একটি অঞ্চল বেছে নিন এবং TLS এনক্রিপশন বেছে নিন।
-
@upstash/redisইনস্টল করুন প্যাকেজ।
pnpm install @upstash/redis
- আপনার
.env.local-এ এই টোকেনগুলি কপি করুন .
এখন এই ডিরেক্টরি কাঠামোতে আমাদের API শেষ পয়েন্ট লিখুন:
.
├── 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;এটাই ছিল। আমাদের রেডিস ক্লায়েন্ট এখন সেট আপ করা হয়েছে এবং যা বাকি আছে তা হল আমাদের অ্যাপ্লিকেশনে এটির জন্য APIরুট সেট আপ করা৷
আমরা মন্তব্য সংরক্ষণের জন্য Redis তালিকা ব্যবহার করা হবে. তারা একটি স্ট্যাক হিসাবে কাজ করতে পারে যাতে সবচেয়ে সাম্প্রতিক মন্তব্য শীর্ষে প্রদর্শিত হয়। অবশ্যই, আমরা বাছাই লজিক ক্লায়েন্ট সাইডও বাস্তবায়ন করতে পারি কিন্তু যখন Redis ইতিমধ্যেই এই ডেটা স্টাকচার প্রদান করে, আসুন এটি ব্যবহার করি।
আপনি এখানে সম্পূর্ণ কোড দেখতে পারেন. এখানে এর সারাংশ:
-
একটি মন্তব্য তৈরি করুন:
redis.lpush(referer, comment). এটিrefererকী থাকার তালিকায় মন্তব্যটিকে পুশ করবে -
সমস্ত মন্তব্য পান
redis.lrange(referer, 0, -1) -
একটি মন্তব্য মুছুন
redis.lrem(referer, 0, comment). এটিcommentএর সমস্ত ঘটনা মুছে ফেলবেrefererকী সহ তালিকায় .
আমাদের API এখন জায়গায় আছে. চলুন ব্যাকএন্ডের সাথে ফ্রন্টএন্ডকে একীভূত করা যাক।
ক্লায়েন্ট সাইড সেট আপ করা
এটা যে কঠিন না. 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;এখন আমাদের মন্তব্য বিভাগ সম্পন্ন হয়েছে. আমরা মন্তব্য আনতে, পোস্ট করতে এবং মুছতে সক্ষম। পরবর্তী পদক্ষেপগুলি মন্তব্য বাক্স এবং মন্তব্য তালিকার জন্য উপাদান তৈরি করা হবে। এখানে একটি সম্পূর্ণ নমুনা আছে
