Next.js tutorial with examples in hindi

 

Next.js क्या है?

Next.js एक open-source React framework है जो React की features जैसे Single Page Applications (SPA) और server-side rendering (SSR) को combine करता है। इसे मुख्य रूप से SEO के लिए उपयुक्त वेबसाइट्स और वेब एप्लिकेशन बनाने के लिए डिज़ाइन किया गया है।

Next.js आपको निम्नलिखित सुविधाएं देता है:

• Server-Side Rendering (SSR): रेंडरिंग सर्वर पर होती है, जिससे SEO और पेज लोडिंग टाइम बेहतर होते हैं।
• Static Site Generation (SSG): आपको पूर्वनिर्मित HTML पेज़ मिलते हैं, जो वेबसाइट को और भी तेज़ बनाते हैं।
• API Routes: Next.js API routes को भी सपोर्ट करता है, जिससे आप आसानी से बैकएंड कोड भी लिख सकते हैं।
• File-based Routing: रूटिंग को बनाने के लिए आपको किसी एक्स्ट्रा कॉन्फ़िगरेशन की आवश्यकता नहीं होती। Next.js आपके फ़ाइल संरचना के आधार पर रूट्स जनरेट कर देता है।
• Built-in CSS Support: Next.js CSS, Sass, और styled-components जैसी स्टाइलिंग विधियों का समर्थन करता है।
• Hot Code Reloading: कोड बदलने के बाद आपको पेज को रिफ्रेश करने की जरूरत नहीं है।

---

Next.js इंस्टालेशन और सेटअप

1. Node.js और npm इंस्टॉल करें:

   • सबसे पहले यह सुनिश्चित करें कि आपके पास Node.js और npm इंस्टॉल हो। आप निम्नलिखित कमांड से इसे चेक कर सकते हैं:

     bash
     node -v
     npm -v
     

2. नया Next.js प्रोजेक्ट बनाएँ:

   • Next.js को स्थापित करने के लिए, आप create-next-app टूल का उपयोग कर सकते हैं, जो एक pre-configured setup प्रदान करता है।

   Next.js प्रोजेक्ट बनाने के लिए, यह कमांड चलाएं:

   bash
   npx create-next-app my-next-app
   

3. प्रोजेक्ट को रन करें:

   • एक बार प्रोजेक्ट तैयार हो जाने के बाद, निम्नलिखित कमांड से इसे रन करें:

     bash
     cd my-next-app
     npm run dev
     

   • यह आपके ऐप्लिकेशन को http://localhost:3000 पर सर्व करेगा।

---

Next.js की फ़ाइल संरचना

Next.js में एक डिफ़ॉल्ट फ़ाइल संरचना होती है। इसमें कुछ मुख्य फ़ोल्डर होते हैं:

1. pages/:

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

2. public/:

   • यहाँ आप अपने स्टेटिक फाइल्स (जैसे कि images, fonts) रख सकते हैं। ये सभी फाइल्स public डायरेक्टरी में स्टोर होती हैं और ब्राउज़र द्वारा सीधे एक्सेस की जा सकती हैं।

3. styles/:

   • यहाँ आपको CSS और SCSS फाइल्स मिलेंगी, जो कि आपके एप्लिकेशन की स्टाइलिंग के लिए इस्तेमाल होती हैं।

---

Basic Next.js Example

अब हम एक साधारण Next.js एप्लिकेशन बनाएंगे जिसमें हम अलग-अलग पेजेस और रूटिंग का उपयोग करेंगे।

1. Home Page (pages/index.js)

index.js फाइल वह पेज है जो आपके एप्लिकेशन का होम पेज बनता है। इस पेज पर कुछ सरल HTML और React JSX दिखाएंगे।

jsx
// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App!</h1>
      <p>This is a basic Next.js application.</p>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  );
}

• Link component: Next.js में लिंक बनाने के लिए हम Link component का उपयोग करते हैं, जो page navigation को तेज़ और एफ़िशियेंट बनाता है।

2. About Page (pages/about.js)

अब हम एक अलग पेज बनाएंगे, जैसे कि about.js, जो हमारी वेबसाइट के बारे में जानकारी देगा।

jsx
// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the About Page of our Next.js application.</p>
    </div>
  );
}

3. Adding Styles (styles/Home.module.css)

Next.js में स्टाइल्स को आप मॉड्यूल के रूप में जोड़ सकते हैं। Home.module.css को बनाने और फिर उसे index.js में इम्पोर्ट करने का तरीका नीचे दिखाया गया है:

css
/* styles/Home.module.css */
.container {
  padding: 20px;
  text-align: center;
}

h1 {
  color: #0070f3;
}

अब, इसे index.js में इम्पोर्ट करते हैं:

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

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App!</h1>
      <p>This is a basic Next.js application.</p>
    </div>
  );
}

4. Static File (public/images/logo.png)

यदि आप अपनी वेबसाइट में कोई इमेज शामिल करना चाहते हैं, तो आप उसे public फोल्डर में रख सकते हैं और सीधे एक्सेस कर सकते हैं। उदाहरण के लिए:

• Logo Image को public/images/logo.png में रखें।

फिर इसे index.js में इस तरह से उपयोग करें:

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

export default function Home() {
  return (
    <div className={styles.container}>
      <img src="/images/logo.png" alt="Logo" />
      <h1>Welcome to My Next.js App!</h1>
      <p>This is a basic Next.js application.</p>
    </div>
  );
}

---

Server-side Rendering (SSR) in Next.js

Next.js में आप Server-Side Rendering (SSR) का उपयोग कर सकते हैं, जिससे पेजों को हर बार सर्वर से रेंडर किया जाता है। इसे getServerSideProps के माध्यम से सेट किया जाता है।

Example: Server-Side Rendering

jsx
// pages/ssr.js
export async function getServerSideProps() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();

  return {
    props: { posts },
  };
}

export default function SSRPage({ posts }) {
  return (
    <div>
      <h1>Server-Side Rendering Example</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

• getServerSideProps: यह function server-side पर रेंडर होता है और props को प्री-फिल करता है। यह हर बार जब पेज लोड होता है तब डेटा को फेच करता है।

---

Static Site Generation (SSG) in Next.js

Next.js में आप Static Site Generation (SSG) का उपयोग भी कर सकते हैं, जिसमें डेटा पहले से ही पेज के साथ रेंडर किया जाता है, और पेज को एक बार पहले से जनरेट कर दिया जाता है। इसे getStaticProps के माध्यम से सेट किया जाता है।

Example: Static Site Generation

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

  return {
    props: { posts },
  };
}

export default function SSGPage({ posts }) {
  return (
    <div>
      <h1>Static Site Generation Example</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}
getStaticProps: यह function build टाइम पर डेटा को फेच करता है और पेज के साथ प्री-रेंडर करता है।
Next.js के लाभ
SEO फ्रेंडली: SSR और SSG के कारण, Next.js SEO के लिए बहुत अच्छा है।
बेहद तेज़: Static Site Generation और SSR से आपके पेज बहुत तेज़ लोड होते हैं।
स्वचालित रूटिंग: Next.js में रूटिंग अपने आप हो जाती है, जिससे डेवलपर्स को मैन्युअल रूटिंग की जरूरत नहीं होती।
सर्वर साइड और क्लाइंट साइड रेंडरिंग: Next.js दोनों रेंडरिंग के विकल्प देता है, जिससे आपको लचीलापन मिलता है।
निष्कर्ष
Next.js एक बेहतरीन React फ्रेमवर्क है जो सर्वर साइड रेंडरिंग और स्टैटिक साइट जेनरेशन जैसी शक्तिशाली सुविधाओं के साथ आता है। यह वेब एप्लिकेशन और वेबसाइट्स को तेज़, SEO फ्रेंडली, और सुगम बनाता है। इस ट्यूटोरियल में हमने Next.js के मुख्य फीचर्स को देखा और एक साधारण एप्लिकेशन बनाने के तरीके को समझा।