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

1. अपना Next.js प्रोजेक्ट सेट करना

Next.js के साथ आरंभ करने के लिए, आपको अपनी मशीन पर Node.js स्थापित करना होगा। एक बार जब आपके पास Node.js सेटअप हो जाए, तो आप निम्न कमांड का उपयोग करके एक नया Next.js एप्लिकेशन बना सकते हैं:

npx create-next-app my-next-app

यह कमांड नेक्स्ट.जेएस एप्लिकेशन शुरू करने के लिए सभी आवश्यक फाइलों और निर्भरताओं के साथ माय-नेक्स्ट-ऐप नामक एक नई निर्देशिका बनाता है।

2. परियोजना संरचना को नेविगेट करना

अपना प्रोजेक्ट बनाने के बाद, प्रोजेक्ट निर्देशिका पर जाएँ:

cd my-next-app

माय-नेक्स्ट-ऐप निर्देशिका के अंदर, आपको इसके समान एक संरचना मिलेगी:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

पेज निर्देशिका वह जगह है जहां आप अपने एप्लिकेशन के पेज बनाएंगे, जबकि सार्वजनिक स्थिर संपत्तियों के लिए है।

3. अपना पहला पेज बनाना

Next.js फ़ाइल-आधारित रूटिंग सिस्टम का उपयोग करता है। एक नया पेज बनाने के लिए, बस पेज निर्देशिका के अंदर एक नई जावास्क्रिप्ट फ़ाइल जोड़ें। उदाहरण के लिए, about.js:
नाम की एक फ़ाइल बनाएं

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

इस उदाहरण में, हमने एक सरल परिचय पृष्ठ बनाया और होम पेज पर वापस जाने के लिए लिंक घटक का उपयोग किया।

4. मुख पृष्ठ को संशोधित करना

पेज निर्देशिका में Index.js फ़ाइल खोलें। यह फ़ाइल आपके एप्लिकेशन के होम पेज का प्रतिनिधित्व करती है। आप इसे इस प्रकार संशोधित कर सकते हैं:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

यहां, हमने कुछ सरल स्टाइल और परिचय पृष्ठ पर एक लिंक जोड़ा है।

5. अपने एप्लिकेशन में शैलियाँ जोड़ना

Next.js बॉक्स से बाहर CSS मॉड्यूल का समर्थन करता है। अपने घटकों को स्टाइल करने के लिए, आप स्टाइल निर्देशिका में एक सीएसएस मॉड्यूल बना सकते हैं। उदाहरण के लिए, Home.module.css:
नाम की एक फ़ाइल बनाएं

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

इसके बाद, इस सीएसएस मॉड्यूल को अपने इंडेक्स.जेएस पेज में आयात करें जैसा कि पिछले अनुभाग में दिखाया गया है।

6. Next.js के साथ डेटा प्राप्त करना

Next.js स्थिर साइट निर्माण के लिए getStaticProps या सर्वर-साइड रेंडरिंग के लिए getServerSideProps का उपयोग करके डेटा प्राप्त करना आसान बनाता है। उदाहरण के लिए, होम पेज पर डेटा लाने के लिए, आप Index.js को इस तरह संशोधित कर सकते हैं:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
    
  );
}

इस कोड में, हम एक सार्वजनिक एपीआई से पोस्ट की एक सूची लाते हैं और उन्हें होम पेज पर प्रदर्शित करते हैं।

7. एपीआई रूट बनाना

Next.js आपको पेज/एपीआई निर्देशिका में एपीआई रूट बनाने की अनुमति देता है। इन मार्गों का उपयोग आपकी बैकएंड कार्यक्षमता बनाने के लिए किया जा सकता है। उदाहरण के लिए, पेज/एपीआई निर्देशिका में hello.js नामक एक फ़ाइल बनाएं:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

आप http://localhost:3000/api/hello पर नेविगेट करके इस एपीआई रूट तक पहुंच सकते हैं।

8. अपना Next.js एप्लिकेशन परिनियोजित करना

एक बार आपका एप्लिकेशन तैयार हो जाए, तो आप इसे आसानी से तैनात कर सकते हैं। नेक्स्ट.जेएस अनुप्रयोगों के लिए वर्सेल अनुशंसित होस्टिंग प्लेटफ़ॉर्म है। आप इन चरणों का पालन करके अपना ऐप तैनात कर सकते हैं:

1. यदि आपके पास वर्सेल खाता नहीं है तो एक वर्सेल खाता बनाएं।

2. विश्व स्तर पर वर्सेल सीएलआई स्थापित करें:
   

   npm install -g vercel
   

3. अपनी प्रोजेक्ट निर्देशिका में निम्नलिखित कमांड चलाएँ:
   

   vercel
   

4. अपना एप्लिकेशन तैनात करने के लिए संकेतों का पालन करें।

9. डायनामिक रूटिंग जोड़ना

Next.js ब्रैकेट का उपयोग करके डायनामिक रूटिंग का समर्थन करता है। उदाहरण के लिए, यदि आप एक गतिशील ब्लॉग पोस्ट पेज बनाना चाहते हैं, तो आप पेज/पोस्ट निर्देशिका में [id].js नामक एक फ़ाइल बना सकते हैं:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

अब आप /पोस्ट/1, /पोस्ट/2, आदि पर नेविगेट करके किसी विशिष्ट पोस्ट तक पहुंच सकते हैं।

10. वैश्विक शैलियाँ लागू करना

यदि आप अपने एप्लिकेशन में वैश्विक शैलियाँ लागू करना चाहते हैं, तो आप पेज निर्देशिका में _app.js नामक फ़ाइल बनाकर ऐसा कर सकते हैं:

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

इसके बाद, स्टाइल निर्देशिका में एक ग्लोबल्स.सीएसएस फ़ाइल बनाएं और अपनी वैश्विक शैलियाँ जोड़ें:

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. पर्यावरण चर का उपयोग करना

Next.js संवेदनशील जानकारी संग्रहीत करने के लिए पर्यावरण चर का समर्थन करता है। आप अपने प्रोजेक्ट के रूट में एक .env.local फ़ाइल बना सकते हैं और अपने वेरिएबल जोड़ सकते हैं:

API_URL=https://example.com/api

फिर आप इस वेरिएबल को अपने एप्लिकेशन में प्रोसेस.एनवी का उपयोग करके एक्सेस कर सकते हैं:

// Example usage in a component
const apiUrl = process.env.API_URL;

अपना पहला नेक्स्ट.जेएस एप्लिकेशन बनाने के लिए बधाई! इस पूरी यात्रा के दौरान, आपने सीखा है कि अपना प्रोजेक्ट कैसे सेट करें, डायनामिक पेज कैसे बनाएं, निर्बाध रूप से डेटा कैसे प्राप्त करें, मजबूत रूटिंग लागू करें और अपने एप्लिकेशन को आसानी से तैनात करें।

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

आपकी Next.js यात्रा के अगले चरण

अब जब आपने अपना पहला नेक्स्ट.जेएस एप्लिकेशन सफलतापूर्वक बना लिया है, तो अपने कौशल को अगले स्तर पर ले जाने का समय आ गया है। इस आगामी पोस्ट श्रृंखला में, हम Next.js की कुछ अधिक उन्नत सुविधाओं के बारे में गहराई से जानेंगे जो आपके अनुप्रयोगों को बढ़ा सकती हैं और आपकी विकास प्रक्रिया को सुव्यवस्थित कर सकती हैं।

मिडलवेयर एक शक्तिशाली सुविधा है जो आपको अनुरोध पूरा होने से पहले कस्टम तर्क जोड़कर अपने एप्लिकेशन की कार्यक्षमता बढ़ाने की अनुमति देती है। इसका मतलब है कि आप अनुरोध और प्रतिक्रिया ऑब्जेक्ट में हेरफेर कर सकते हैं, उपयोगकर्ताओं को प्रमाणित कर सकते हैं, या यहां तक ​​कि रीडायरेक्ट को निर्बाध रूप से प्रबंधित कर सकते हैं।

अगला, हम स्टेटिक साइट जेनरेशन (एसएसजी) का पता लगाएंगे। यह तकनीक बिल्ड समय पर पृष्ठों को प्री-रेंडर करती है, जिससे तेज़ लोडिंग गति और बेहतर एसईओ प्रदर्शन की अनुमति मिलती है। एसएसजी का लाभ उठाने के तरीके को समझकर, आप ऐसे एप्लिकेशन बना सकते हैं जो न केवल गतिशील हैं बल्कि अविश्वसनीय रूप से कुशल भी हैं।

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

जैसे ही हम नेक्स्ट.जेएस की उन्नत क्षमताओं की इस रोमांचक यात्रा पर निकल रहे हैं, मेरा अनुसरण करें। अपने पास मौजूद इन उपकरणों के साथ, आप मजबूत, उच्च-प्रदर्शन वाले एप्लिकेशन बनाने में सक्षम होंगे जो वास्तव में सबसे अलग होंगे। हमारी अगली पोस्ट के लिए बने रहें!

आप इस पोस्ट को यहां भी पढ़ सकते हैं:

Next.js का परिचय: अपना पहला एप्लिकेशन बनाना

Next.js एक लोकप्रिय रिएक्ट फ्रेमवर्क है जो डेवलपर्स को तेज़, सर्वर-रेंडर एप्लिकेशन बनाने में सक्षम बनाता है। यह बॉक्स से बाहर शक्तिशाली सुविधाएँ प्रदान करता है!

salmaniyad.hashnode.dev

मुझे खोजें:

सलमानइयाद · गिटहब

कंप्यूटर सिस्टम इंजीनियर | वेब डेवलपर। सलमानइयाद के पास 31 रिपॉजिटरी उपलब्ध हैं। GitHub पर उनके कोड का पालन करें।

github.com