वेब विकास की निरंतर विकसित हो रही दुनिया में, आगे रहना महत्वपूर्ण है। Next.js दर्ज करें, एक शक्तिशाली रिएक्ट फ्रेमवर्क जो हमारे आधुनिक वेब एप्लिकेशन बनाने के तरीके में क्रांतिकारी बदलाव ला रहा है। आइए जानें कि नेक्स्ट.जेएस को क्या खास बनाता है और यह कैसे व्यावहारिक उदाहरणों के साथ आपकी विकास प्रक्रिया को सुपरचार्ज कर सकता है।

Next.js क्या है?

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

Next.js क्यों चुनें?

Next.js कई आकर्षक सुविधाएँ प्रदान करता है:

1. सर्वर-साइड रेंडरिंग (एसएसआर)
2. स्टेटिक साइट जेनरेशन (एसएसजी)
3. एपीआई रूट

आइए उदाहरणों के साथ इन विशेषताओं के बारे में गहराई से जानें।

Next.js की मुख्य विशेषताएं

1. फ़ाइल-आधारित रूटिंग

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

उदाहरण:

// pages/about.js
export default function About() {
  return 
About Us
}

यह फ़ाइल स्वचालित रूप से /about पर एक मार्ग बनाती है।

2. सर्वर-साइड रेंडरिंग (एसएसआर)

SSR को getServerSideProps फ़ंक्शन का उपयोग करके कार्यान्वित किया जाता है।

उदाहरण:

// pages/ssr-example.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return { props: { data } }
}

export default function SSRPage({ data }) {
  return 
Server-side rendered data: {data.title}
}

यह पृष्ठ ताज़ा सामग्री सुनिश्चित करते हुए प्रत्येक अनुरोध पर डेटा लाएगा।

3. स्टेटिक साइट जेनरेशन (एसएसजी)

स्थैतिक सामग्री के लिए, getStaticProps का उपयोग करें।

उदाहरण:

// pages/ssg-example.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data')
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60 // Regenerate page every 60 seconds
  }
}

export default function SSGPage({ data }) {
  return 
Static data: {data.content}
}

यह पृष्ठ निर्माण के समय तैयार किया जाएगा और इसे निर्दिष्ट अंतराल पर पुन: उत्पन्न करने के लिए सेट किया जा सकता है।

4. एपीआई रूट

अपने नेक्स्ट.जेएस ऐप के भीतर एपीआई एंडपॉइंट बनाएं।

उदाहरण:

// pages/api/user.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe', age: 30 })
}

यह /api/user पर एक एपीआई एंडपॉइंट बनाता है जो उपयोगकर्ता डेटा लौटाता है।

वर्सेल के साथ तैनाती

वर्सेल के साथ तैनाती सीधी है:

1. अपने GitHub रिपॉजिटरी को वर्सेल से कनेक्ट करें।
2. अपनी प्रोजेक्ट सेटिंग कॉन्फ़िगर करें।
3. एक क्लिक से परिनियोजन करें।

वर्सेल स्वचालित रूप से सीआई/सीडी सेट करता है, जिससे अपडेट आपके रिपॉजिटरी में भेजने जितना आसान हो जाता है।

Next.js विकास के लिए सर्वोत्तम अभ्यास

1.संभव होने पर स्टेटिक जेनरेशन का उपयोग करें

उन पेजों के लिए जिन्हें पहले से रेंडर किया जा सकता है, हमेशा एसएसजी चुनें:

   export async function getStaticProps() {
     // Fetch data from an API
     const res = await fetch('https://api.example.com/posts')
     const posts = await res.json()

     return {
       props: {
         posts,
       },
     }
   }

2.छवियों को अनुकूलित करें

स्वचालित छवि अनुकूलन के लिए अगले/छवि घटक का उपयोग करें:

   import Image from 'next/image'

   function HomePage() {
     return (
       
     )
   }

3.सीएसएस को कुशलतापूर्वक प्रबंधित करें

घटक-स्कोप वाली शैलियों के लिए सीएसएस मॉड्यूल का उपयोग करें:

   // styles/Home.module.css
   .container {
     padding: 0 2rem;
   }

   // pages/index.js
   import styles from '../styles/Home.module.css'

   export default function Home() {
     return 
Welcome to Next.js!
   }

निष्कर्ष

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

गोता लगाने के लिए तैयार हैं? आज ही अपनी Next.js यात्रा शुरू करें और अपने वेब विकास परियोजनाओं के लिए संभावनाओं की दुनिया खोलें!