इस लेख में, हम एक सर्वरलेस Next.js आधारित TODO एप्लिकेशन बनाएंगे। हम इसे यथासंभव न्यूनतम बनाने का प्रयास करेंगे। इसमें कोई डेटाबेस कनेक्शन नहीं होगा। Next.js के अलावा कोई अतिरिक्त निर्भरता नहीं होगी। कोई बटन नहीं होगा। इसके अलावा, न्यूनतावाद कूल और साफ है, मुझे यह पसंद है क्योंकि मैं एक आलसी डेवलपर हूँ :)
हम डेटाबेस कनेक्शन से क्यों बचते हैं?
Next.js एक आधुनिक फ्रेमवर्क है जो फ्रंटएंड डेवलपर्स को फुल-स्टैक एप्लिकेशन विकसित करने में सक्षम बनाता है। सर्वरलेस फ़ंक्शंस Next.js डेवलपर्स के लिए बैकेंड विकास को सरल बनाने में महत्वपूर्ण भूमिका निभाते हैं। जैसा कि आप शायद जानते हैं, सर्वरलेस फ़ंक्शंस अपनी स्टेटलेस प्रकृति के कारण डेटाबेस कनेक्शन पसंद नहीं करते। सर्वरलेस फ़ंक्शंस के अंदर डेटाबेस कनेक्शन की समस्याओं के उदाहरण के लिए यहां और यहां देखें।
REST एक उत्तर है
REST क्लाइंट और सर्वर को किसी सत्र जानकारी के बिना संवाद करने की अनुमति देता है। यह स्टेटलेसनेस और इसकी सरल प्रकृति REST को सर्वरलेस वातावरण के लिए एक आदर्श संचार प्रोटोकॉल बनाती है। हम Upstash Redis को REST के साथ एक्सेस करेंगे।
प्रोजेक्ट स्टैक
- फ्रंटएंड: Next.js
- बैकएंड: Vercel फ़ंक्शंस
- डेटाबेस: Upstash Redis REST API के साथ
डेमो देखें: https://nextjs-todo-zeta.vercel.app/
कोड देखें: GitHub रिपॉजिटरी
प्रोजेक्ट सेटअप
Next.js ऐप बनाएं: npx create-next-app
AWS-US-EAST-1 क्षेत्र में Upstash Redis डेटाबेस बनाएं और REST URL और टोकन कॉपी करें।
प्रोजेक्ट 3 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 (
);
}
जैसा कि आप देख सकते हैं, यह एक बुनियादी React एप्लिकेशन है जो हुक का उपयोग करता है। हमारे पास 3 मेथड्स हैं जो APIs के साथ इंटरैक्ट करते हैं: addTodo, removeTodo और loadTodos।
और अंत में styles/Home.module.css फ़ाइल को यहां दिए अनुसार अपडेट करें।
चलाएं और डेप्लॉय करें
अपने प्रोजेक्ट को npm run dev के साथ स्थानीय रूप से चलाएं। यदि सब कुछ अच्छा लगता है, तो प्रोजेक्ट फोल्डर में vercel चलाकर अपने प्रोजेक्ट को डेप्लॉय कर सकते हैं। Vercel आपके API फ़ंक्शंस के लिए सर्वरलेस फ़ंक्शंस बनाएगा। Vercel फ़ंक्शंस के लिए डिफ़ॉल्ट क्षेत्र US-EAST-1 है, इसलिए हमने अपना डेटाबेस उसी क्षेत्र में बनाया।
नोट्स
- डेटाबेस टोकन को Vercel एनवायरनमेंट वेरिएबल में रखना अधिक सुरक्षित है।
- सर्वोत्तम प्रदर्शन के लिए सर्वरलेस फ़ंक्शन और Redis डेटाबेस को एक ही क्षेत्र में रखें।
- हम REST API के बजाय Redis क्लाइंट्स का उपयोग कर सकते थे। लेकिन जैसा कि मैंने पहले उल्लेख किया, डेटाबेस कनेक्शन सर्वरलेस फ़ंक्शंस के अंदर समस्याएं पैदा कर सकते हैं। साथ ही ध्यान दें कि हमने Upstash REST API और नेटिव API के बीच कोई बड़ा प्रदर्शन अंतर नहीं देखा।
