परिचय
आज हम सीखेंगे कि Next.js और Netlify का उपयोग करके एक कैपिटल सिटी ऐप कैसे बनाया जाए। आज की तेज़ गति वाली डिजिटल दुनिया में, उपयोगकर्ताओं को जोड़ने और उन्हें एक सहज अनुभव प्रदान करने के लिए इंटरैक्टिव और गतिशील वेब एप्लिकेशन बनाना महत्वपूर्ण है। नेक्स्ट.जेएस, एक लोकप्रिय रिएक्ट फ्रेमवर्क, डेवलपर्स को आसानी से शक्तिशाली सर्वर-साइड रेंडर (एसएसआर) एप्लिकेशन बनाने की अनुमति देता है। जब एक आधुनिक वेब डेवलपमेंट प्लेटफ़ॉर्म, Netlify के साथ संयुक्त किया जाता है, तो आप अपने एप्लिकेशन को आसानी से तैनात कर सकते हैं और निरंतर तैनाती, सर्वर रहित फ़ंक्शंस और वैश्विक CDN जैसी इसकी मजबूत सुविधाओं का लाभ उठा सकते हैं। इस लेख में, हम जानेंगे कि Next.js का उपयोग करके कैपिटल सिटी ऐप कैसे बनाया जाए और इसे Netlify पर कैसे तैनात किया जाए।

हम क्या उपयोग कर रहे हैं

• Next.js
• नेटलाइज़
• टाइपस्क्रिप्ट
• टेलविंड सीएसएस

आवश्यकताएँ
इससे पहले कि हम आगे बढ़ें, सुनिश्चित करें कि आपने निम्नलिखित इंस्टॉल कर लिया है:

• Node.js (v14 या बाद का संस्करण)
• एनपीएम या यार्न
• गिट

प्रोजेक्ट की स्थापना

सबसे पहले, आइए एक नया Next.js प्रोजेक्ट बनाएं। अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:

एनपीएक्स क्रिएट-नेक्स्ट-ऐप कैपिटल-सिटी-ऐप

प्रोजेक्ट निर्देशिका पर नेविगेट करें:

सीडी कैपिटल-सिटी-ऐप

कैपिटल सिटी ऐप बनाना

1. एपीआई की स्थापना हमारे कैपिटल सिटी ऐप के लिए, हम एक निःशुल्क एपीआई का उपयोग करेंगे जो देशों और उनकी राजधानियों के बारे में डेटा प्रदान करता है। ऐसा ही एक API REST कंट्रीज़ API है। एपीआई से डेटा लाने के लिए lib निर्देशिका में api.js नाम की एक फ़ाइल बनाएं:

export async function getCountries() {
    const res = await fetch('https://restcountries.com/v3.1/all');
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
    const data = await res.json();
    return data;
  }

1. घटक बनाना आइए अलग-अलग देश का विवरण प्रदर्शित करने के लिए एक कंट्रीकार्ड घटक बनाएं। घटक निर्देशिका में कंट्रीकार्ड.जेएस नाम की एक फ़ाइल बनाएं:

import React from 'react';

const CountryCard = ({ country }) => {
  return (
    

      
{country.name.common}
      
Capital: {country.capital}
      
Region: {country.region}
      
    
  );
}

export default CountryCard;

1. डेटा लाना और प्रदर्शित करना अपने पेज/index.js फ़ाइल में, देश का डेटा प्राप्त करें और इसे कंट्रीकार्ड घटक का उपयोग करके प्रदर्शित करें:

import { getCountries } from '../app/lib/api';
import CountryCard from '../components/CountryCard';

export async function getStaticProps() {
  const countries = await getCountries();
  return {
    props: {
    countries,
    },
  };
}

const Home = ({ countries }) => {
  return (
    

      
Capital City App
      

        {countries.map((country) => (
          
        ))}
      
      
    
  );
};

export default Home;

नेटलिफाई पर तैनाती

1. रिपॉजिटरी की स्थापना

अपने प्रोजेक्ट में एक गिट रिपॉजिटरी प्रारंभ करें:
गिट init
गिट जोड़ें .
गिट कमिट -एम "प्रारंभिक कमिट"

2. Netlify पर तैनाती

1. नेटलिफाई पर एक नई साइट बनाएं: नेटलिफाई पर जाएं और लॉग इन करें। "गिट से नई साइट" पर क्लिक करें।
2. अपनी Git रिपॉजिटरी से कनेक्ट करें: अपना Git प्रदाता (GitHub, GitLab, Bitbucket) चुनें और अपनी रिपॉजिटरी चुनें।
3. अपनी बिल्ड सेटिंग्स कॉन्फ़िगर करें:

• बिल्ड कमांड: अगला बिल्ड
• निर्देशिका प्रकाशित करें: .next

साइट परिनियोजित करें: "साइट परिनियोजित करें" पर क्लिक करें। Netlify स्वचालित रूप से आपकी साइट का निर्माण और तैनाती करेगा।

3. सतत परिनियोजन की स्थापना

जब भी आप अपने रिपॉजिटरी में परिवर्तन दबाते हैं, तो Netlify स्वचालित रूप से एक नया बिल्ड ट्रिगर करेगा और आपके ऐप के अपडेटेड संस्करण को तैनात करेगा।

निष्कर्ष

बधाई हो! आपने Next.js और Netlify का उपयोग करके एक कैपिटल सिटी ऐप सफलतापूर्वक बनाया और तैनात किया है। यह ऐप REST कंट्रीज़ API से डेटा प्राप्त करता है और इसे उपयोगकर्ता के अनुकूल तरीके से प्रदर्शित करता है। Next.js के सर्वर-साइड रेंडरिंग और Netlify के शक्तिशाली परिनियोजन सुविधाओं के साथ, आप गतिशील वेब एप्लिकेशन को कुशलतापूर्वक बना और तैनात कर सकते हैं।

Next.js और Netlify आधुनिक वेब विकास के लिए एक शक्तिशाली संयोजन बनाते हैं, जो आपको आपके लिए तैनाती और स्केलिंग की जटिलताओं को संभालने के साथ-साथ बेहतरीन सुविधाओं के निर्माण पर ध्यान केंद्रित करने की अनुमति देता है। हैप्पी कोडिंग!