এই আর্টিকেলে আমরা একটি সার্ভারলেস Next.js-ভিত্তিক TODO অ্যাপ্লিকেশন বানাব। আমরা এটি যতটা সম্ভব মিনিমালিস্ট রাখব। কোনো ডেটাবেস কানেকশন নেই। Next.js ছাড়া কোনো এক্সট্রা ডিপেন্ডেন্সি নেই। কোনো বাটনও নেই। বস, minimalism কুল এবং ক্লিন, আমি পছন্দ করি কারণ আমি একটি怠 惰 ডেভেলপার :)।
কেন ডেটাবেস কানেকশন এড়িয়ে চলি?
Next.js একটি আধুনিক ফ্রেমওয়ার্ক যা ফ্রন্টএন্ড ডেভেলপারদের ফুল-স্ট্যাক অ্যাপ্লিকেশন বানাতে দেয়। সার্ভারলেস ফাংশন Next.js ডেভেলপারদের জন্য ব্যাকএন্ড ডেভেলপমেন্ট সহজ করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। আপনি জানতেই পারেন, সার্ভারলেস ফাংশন স্টেটলেস প্রকৃতির কারণে ডেটাবেস কানেকশন পছন্দ করে না। সমস্যাগুলোর উদাহরণ দেখুন এখানে এবং এখানে।
REST সমাধান
REST ক্লায়েন্ট এবং সার্ভারের মধ্যে সেশন ইনফো ছাড়াই কমিউনিকেশন করতে দেয়। এই স্টেটলেসনেস এবং এর সিম্পল ন্যাচার REST-কে সার্ভারলেস এনভায়রনমেন্টের জন্য আদর্শ কমিউনিকেশন প্রোটোকল করে তোলে। আমরা Upstash Redis REST API-তে এক্সেস করব।
প্রজেক্ট স্ট্যাক
- ফ্রন্টএন্ড: Next.js
- ব্যাকএন্ড: Vercel ফাংশন
- ডেটাবেস: Upstash Redis with REST API
ডেমো: https://nextjs-todo-zeta.vercel.app/
কোড: GitHub রিপো
প্রজেক্ট সেটআপ
Next.js অ্যাপ তৈরি করুন: npx create-next-app
Upstash Redis ডেটাবেস AWS-US-EAST-1 রিজনে তৈরি করুন এবং REST URL ও টোকেন কপি করুন।
প্রজেক্টটি একটি সিঙ্গেল পেজ অ্যাপ্লিকেশন যাতে ৩টি API এন্ডপয়েন্ট থাকবে:
pages/api/list.js: TODO আইটেমগুলো লিস্ট করে।pages/api/add.js: TODO আইটেম যোগ করে।pages/api/remove.js: TODO আইটেম মুছে ফেলে।
কোড
pages/api/list.js
export default async (req, res) => {
const token = "REPLACE_YOUR_TOKEN";
const url = "https://REPLACE_YOUR_ENDPOINT/lrange/todo/0/100?_token=" + token;
return fetch(url)
.then((r) => r.json())
.then((data) => {
let result = JSON.stringify(data.result);
return res.status(200).json(result);
});
};pages/api/add.js
export default async (req, res) => {
if (!req.query.todo) {
return res.status(400).send("todo parameter required.");
}
let todo = encodeURI(req.query.todo);
const token = "REPLACE_YOUR_TOKEN";
const url = "https://REPLACE_YOUR_ENDPOINT/lpush/todo/" + todo + "?_token=" + token;
return fetch(url)
.then((r) => r.json())
.then((data) => {
let result = JSON.stringify(data.result);
return res.status(200).json(result);
});
};pages/api/remove.js
export default async (req, res) => {
if (!req.query.todo) {
return res.status(400).send("todo parameter required.");
}
let todo = encodeURI(req.query.todo);
const token = "REPLACE_YOUR_TOKEN";
const url = "https://REPLACE_YOUR_ENDPOINT/lrem/todo/1/" + todo + "?_token=" + token;
return fetch(url)
.then((r) => r.json())
.then((data) => {
let result = JSON.stringify(data.result);
return res.status(200).json(result);
});
};pages/index.js আপডেট করুন
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useEffect, useState } from "react";
export default function Home() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [todo, setTodo] = useState("");
let changeHandler = (event) => {
setTodo(event.target.value);
};
let addTodo = (event) => {
setLoading(true);
event.preventDefault();
fetch("/api/add?todo=" + todo)
.then((res) => res.json())
.then((data) => {
loadTodos();
});
};
let removeTodo = (rtodo) => {
setLoading(true);
fetch("/api/remove?todo=" + rtodo)
.then((res) => res.json())
.then((data) => {
loadTodos();
});
};
let loadTodos = () => {
console.log("load todos");
fetch("/api/list")
.then((res) => res.json())
.then((data) => {
setData(data);
setLoading(false);
});
};
useEffect(() => {
setLoading(true);
loadTodos();
}, []);
if (!data) return "Loading...";
return (
Next.js TODO APP
TODO App with
Next.js!
{loading ? (
) : (
)}
{data.map((item) => (
removeTodo(item)} className={styles.card}>
{item}
))}
);
}আপনি দেখছেন, এটি একটি বেসিক React অ্যাপ্লিকেশন যা হুকস ব্যবহার করে। API-র সাথে ইন্টারঅ্যাক্ট করার জন্য ৩টি মেথড আছে: addTodo, removeTodo এবং loadTodos।
অবশেষে styles/Home.module.css ফাইলটি এখান থেকে আপডেট করুন।
রান এবং ডিপ্লয়
লোকালি প্রজেক্ট চালান npm run dev দিয়ে। সব ঠিক থাকলে vercel কমান্ড চালিয়ে প্রজেক্ট ফোল্ডারে ডিপ্লয় করুন। Vercel আপনার API ফাংশনগুলোর জন্য সার্ভারলেস ফাংশন তৈরি করবে। Vercel ফাংশন들의 ডিফল্ট রিজন US-EAST-1, তাই আমরা ডেটাবেসও একই রিজনে তৈরি করেছি।
নোটস
- ডেটাবেস টোকেন Vercel এনভায়রনমেন্ট ভেরিয়েবল-এ রাখা নিরাপদ।
- সার্ভারলেস ফাংশন এবং Redis ডেটাবেস একই রিজনে রাখা পারফরম্যান্সের জন্য সেরা।
- আমরা Redis ক্লায়েন্টও ব্যবহার করতে পারতাম REST API-এর বদলে। কিন্তু如前োক্ত, সার্ভারলেস ফাংশনে ডেটাবেস কানেকশন সমস্যা সৃষ্টি করতে পারে। দ্রষ্টব্য, Upstash REST API এবং নেটিভ API-এর মাঝে বড় পারফরম্যান্স পার্থক্য আমরা দেখিনি।
