Next.js प्रारंभिक गाइड: आधुनिक वेब अनुप्रयोग बनाने का सबसे अच्छा विकल्प

प्रस्तावना

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

Next.js क्या है?

Next.js एक React का ढांचा है, जिसका उद्देश्य डेवलपर्स को उत्पादन के लिए तैयार अनुप्रयोगों को तेजी से बनाने में मदद करना है। यह कई शक्तिशाली सुविधाएँ प्रदान करता है, जैसे:

सर्वर-साइड रेंडरिंग (SSR) और स्थैतिक निर्माण (SSG): पृष्ठों को सर्वर पर पूर्व-रेंडर करने का समर्थन करता है, लोडिंग गति और SEO प्रदर्शन को बढ़ाता है।
रूटिंग: अंतर्निहित फ़ाइल प्रणाली रूटिंग, पृष्ठों और API रूटिंग के प्रबंधन को सरल बनाती है।
API रूटिंग: एक ही परियोजना में आसानी से API बनाना, बिना अतिरिक्त सर्वर की आवश्यकता के।
प्रदर्शन का अनुकूलन: स्वचालित कोड विभाजन, प्रारंभिक लोडिंग समय को कम करता है।

Next.js स्थापित करना

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

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

उपरोक्त कमांड चलाने के बाद, आप देखेंगे कि http://localhost:3000 पर एक नया Next.js अनुप्रयोग शुरू हुआ है।

परियोजना संरचना

Next.js अनुप्रयोग बनाने के बाद, आप एक डिफ़ॉल्ट निर्देशिका संरचना देखेंगे:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

pages/: पृष्ठों के लिए निर्देशिका, प्रत्येक .js फ़ाइल स्वचालित रूप से एक रूट से मेल खाती है।
public/: स्थैतिक फ़ाइलों की निर्देशिका, इस निर्देशिका में रखी गई कोई भी फ़ाइल सीधे एक्सेस की जा सकती है।
styles/: CSS फ़ाइलों के लिए निर्देशिका, जिसका उपयोग वैश्विक या विशिष्ट घटकों की शैली के लिए किया जा सकता है।

पृष्ठ और रूट बनाना

Next.js के पृष्ठ फ़ाइल प्रणाली के आधार पर रूट प्रबंधन करते हैं। pages/ निर्देशिका में एक फ़ाइल बनाएं, जैसे about.js, सामग्री के साथ:

export default function About() {
  return 

# हमारे बारे में

;
}

यह स्वचालित रूप से इस पृष्ठ तक पहुँचने के लिए एक /about रूट बनाएगा।

स्थैतिक निर्माण और सर्वर-साइड रेंडरिंग

Next.js डेटा अधिग्रहण रणनीति के आधार पर स्थैतिक निर्माण (Static Generation) और सर्वर-साइड रेंडरिंग (Server-side Rendering) का समर्थन करता है। आइए देखें कि इसे कैसे लागू किया जाए:

स्थैतिक निर्माण (Static Generation)

यदि आप परियोजना के निर्माण के समय सामग्री को पूर्व-निर्मित करना चाहते हैं, तो आप getStaticProps का उपयोग कर सकते हैं। उदाहरण के लिए:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

export default function Page({ data }) {
  return {data.title};
}

सर्वर-साइड रेंडरिंग (Server-side Rendering)

यदि आप हर अनुरोध पर डेटा प्राप्त करना चाहते हैं, तो आप getServerSideProps का उपयोग कर सकते हैं:

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

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

CSS और शैली जोड़ना

Next.js CSS शैलियों को जोड़ने के कई तरीके प्रदान करता है, सबसे सरल तरीका styles/ निर्देशिका में CSS फ़ाइल बनाना और आवश्यक पृष्ठों में इसे आयात करना है:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

# Next.js में आपका स्वागत है!

;
}

इसके अलावा, आप styled-components या Emotion जैसे CSS-in-JS पुस्तकालयों का उपयोग करके शैलियों को प्रबंधित कर सकते हैं।

API रूट

आप pages/api/ निर्देशिका में API रूट बना सकते हैं। उदाहरण के लिए, एक hello.js फ़ाइल बनाएं:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

API रूट अनुरोधों और प्रतिक्रियाओं को संभाल सकते हैं, फ्रंट-एंड को गतिशील डेटा प्रबंधन की क्षमता प्रदान करते हैं।

Next.js अनुप्रयोग को तैनात करना

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

निष्कर्ष

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

यदि आपके कोई प्रश्न हैं या आगे सीखने के संसाधनों की आवश्यकता है, तो कृपया Next.js के आधिकारिक दस्तावेज़ को देखें।