सबसे मिनिमलिस्ट Next.js TODO ऐप

इस लेख में, हम TODO एप्लिकेशन पर आधारित एक Serverless Next.js का निर्माण करेंगे। हम इसे न्यूनतम बनाने की पूरी कोशिश करेंगे। इसका कोई डेटाबेस कनेक्शन नहीं होगा। इसमें Next.js के अलावा कोई अतिरिक्त निर्भरता नहीं होगी। इसमें कोई बटन नहीं होगा। इसके अलावा, minimalism शांत और साफ है, मुझे यह पसंद है क्योंकि मैं एक आलसी डेवलपर हूं :)

हम डेटाबेस कनेक्शन से क्यों बचते हैं?

Next.js एक आधुनिक ढांचा है जो फ्रंट-एंड डेवलपर्स को पूर्ण स्टैक एप्लिकेशन विकसित करने में सक्षम बनाता है। नेक्स्ट.जेएस डेवलपर्स के लिए बैकएंड डेवलपमेंट को आसान बनाने में सर्वरलेस फंक्शन्स की महत्वपूर्ण भूमिका होती है। जैसा कि आप शायद जानते हैं, सर्वर रहित फ़ंक्शन अपने स्टेटलेस प्रकृति के कारण डेटाबेस कनेक्शन पसंद नहीं करते हैं। सर्वर रहित फ़ंक्शन के अंदर डेटाबेस कनेक्शन की समस्याओं के उदाहरणों के रूप में यहां और यहां देखें।

REST एक उत्तर है

आरईएसटी क्लाइंट और सर्वर को बिना किसी सत्र जानकारी के संवाद करने की अनुमति देता है। यह स्टेटलेसनेस और इसकी सरल प्रकृति आरईएसटी को सर्वर रहित वातावरण के लिए एक आदर्श संचार प्रोटोकॉल बनाती है। हम REST के साथ Upstash Redis को एक्सेस करेंगे।

प्रोजेक्ट स्टैक

• फ्रंटेंड:Next.js
• बैकएंड:वर्सेल फ़ंक्शन
• डेटाबेस:REST API के साथ Upstash Redis

डेमो देखें:https://nextjs-todo-zeta.vercel.app/

कोड देखें:https://github.com/upstash/examples/tree/master/nextjs-todo

प्रोजेक्ट सेटअप

एक Next.js ऐप बनाएं:npx create-next-app

AWS-US-EAST-1 क्षेत्र में एक Upstash Redis डेटाबेस बनाएं और REST URL और टोकन को कॉपी करें।

यह प्रोजेक्ट 3 एपीआई एंडपॉइंट्स के साथ सिंगल पेज एप्लीकेशन होगा:

• pages/api/list.js:TODO आइटम को सूचीबद्ध करता है।
• pages/api/add.js:एक TODO आइटम जोड़ता है।
• pages/api/remove.js:TODO आइटम को हटाता है।

कोड

नीचे दिए गए अनुसार पेज/एपीआई/सूची.जेएस जोड़ें:

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

पेज/एपीआई/ऐड.जेएस नीचे के रूप में जोड़ें:

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

नीचे दिए गए अनुसार पेज/एपीआई/निकालें.जेएस जोड़ें:

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

नीचे दिए गए अनुसार पेज/इंडेक्स.जेएस अपडेट करें:

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 (
    <div className={styles.container}>
      <Head>
        <title>Next.js TODO APP</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.grid}>
          <h1 className={styles.title}>
            TODO App with{" "}
            <a href="https://blog.upstash.com/nextjs-todo">Next.js!</a>
            <br />
            <br />
          </h1>
          {loading ? (
            <a href="#" className={styles.card}>
              <img src="/loader.gif" />
            </a>
          ) : (
            <form className={styles.cardForm} onSubmit={addTodo}>
              <input
                className={styles.cardInput}
                type="text"
                name="todo"
                onChange={changeHandler}
                placeholder="Enter your exciting TODO item!"
              />
            </form>
          )}

          {data.map((item) => (
            <a
              href="#"
              onClick={() => removeTodo(item)}
              className={styles.card}
            >
              <p>{item}</p>
            </a>
          ))}
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://blog.upstash.com/nextjs-todo"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/logo.png" alt="Upstash Logo" width={87} height={25} />
          </span>
        </a>
      </footer>
    </div>
  );
}

जैसा कि आप देख सकते हैं, यह एक बुनियादी रिएक्ट एप्लिकेशन है जो हुक का उपयोग करता है। हमारे पास 3 तरीके हैं जो API के साथ इंटरैक्ट करते हैं:addTodo, removeTodo और loadTodos।

और अंत में यहाँ की तरह Styles/Home.module.css फ़ाइल को अपडेट करें।

चलाएं और परिनियोजित करें

npm run dev . के साथ अपने प्रोजेक्ट को स्थानीय रूप से चलाएँ . यदि सब कुछ अच्छा लगता है, तो आप vercel . चलाकर अपना प्रोजेक्ट परिनियोजित कर सकते हैं प्रोजेक्ट फ़ोल्डर में। वर्सेल आपके एपीआई कार्यों के लिए सर्वर रहित फ़ंक्शन बनाएगा। वर्सेल फ़ंक्शंस के लिए डिफ़ॉल्ट क्षेत्र US-EAST-1 है, इसलिए हमने उसी क्षेत्र में अपना डेटाबेस बनाया है।

नोट्स

• डेटाबेस टोकन को वर्सेल पर्यावरण चर में रखना सुरक्षित है।
• सर्वर रहित फ़ंक्शन और Redis डेटाबेस को एक ही क्षेत्र में रखना प्रदर्शन के लिए सबसे अच्छा है।
• हम REST API के बजाय Redis क्लाइंट का उपयोग कर सकते हैं। लेकिन जैसा कि मैंने पहले उल्लेख किया है, डेटाबेस कनेक्शन सर्वर रहित कार्यों के अंदर समस्याएँ पैदा कर सकते हैं। यह भी ध्यान दें कि हमने Upstash REST API और नेटिव API के बीच कोई बड़ा प्रदर्शन अंतर नहीं देखा।