ServBay में Next.js प्रोजेक्ट बनाएँ और चलाएँ

परिचय

Next.js एक शक्तिशाली React फ्रेमवर्क है जिसे Vercel ने विकसित और मेंटेन किया है, और यह आधुनिक, उच्च-प्रदर्शन वाली वेब एप्लिकेशन बनाने के लिए व्यापक रूप से इस्तेमाल होता है। यह React के ऊपर कई बिल्ट-इन सुविधाएँ प्रदान करता है, जिससे डेवलपर्स के लिए जटिल एप्लिकेशन बनाना काफी आसान हो जाता है।

Next.js क्या है?

Next.js एक लोकप्रिय ओपन-सोर्स React फ्रेमवर्क है, जो सर्वर-साइड रेंडरिंग (SSR) और स्टैटिक साइट जेनरेशन (SSG) जैसी विविध रेंडरिंग विधियों का समर्थन करता है। ये खूबियाँ एप्लिकेशन के प्रदर्शन को बेहतर बनाती हैं, यूजर एक्सपीरियंस बढ़ाती हैं और SEO के लिए बेहतर दृश्यता देती हैं। Next.js में बिल्ट-इन फाइल सिस्टम राउटिंग, API रूटिंग, कोड स्प्लिटिंग, CSS Modules सपोर्ट जैसे ढेर सारे फीचर हैं, जिससे डेवेलपमेंट का अनुभव एकदम समेकित बनता है।

Next.js की मुख्य तथ्य और फायदे

• मल्टीपल रेंडरिंग स्ट्रैटेजीज़ सपोर्ट: सर्वर-साइड रेंडरिंग (SSR), स्टैटिक साइट जेनरेशन (SSG), क्लाइंट-साइड रेंडरिंग (CSR) और हाइब्रिड रेंडरिंग, जिससे आप अपनी ज़रूरत के अनुसार आदर्श मोड चुन सकते हैं।
• फाइल सिस्टम राउटिंग: pages या app डायरेक्टरी संरचना के आधार पर ऑटोमेटिक रूट जनरेशन — बिल्कुल आसान और सीधा।
• API रूटिंग: अपने Next.js प्रोजेक्ट में सीधे API endpoints बनाना संभव, जिससे फ्रंटएंड और बैकएंड की इंटीग्रेटेड डेवेलपमेंट आसान होती है।
• ऑटोमैटिक कोड स्प्लिटिंग: हर पेज का कोड अलग-अलग लोड होता है, जिससे लोडिंग स्पीड में सुधार होता है।
• इमेज ऑप्टिमाइज़ेशन (next/image): इमेज का साइज, फॉर्मेट और लोडिंग स्ट्रैटेजी ऑटो ऑप्टिमाइज़ की जाती है, जिससे परफॉर्मेंस बढ़ती है।
• इंबिल्ट CSS और Sass सपोर्ट: स्टाइलिंग मैनेज और लिखना बहुत आसान।
• फास्ट रिफ्रेश: कोड बदलते ही तुरंत अपडेट देखने को मिलता है — डेवेलपमेंट के समय तेज़ फीडबैक।

Next.js के साथ, डेवलपर्स तेजी से उच्च-प्रदर्शन, स्केलेबल और बनाए रखने में आसान आधुनिक वेब एप्लिक्शन बना सकते हैं।

ServBay में Next.js प्रोजेक्ट चलाएँ

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

यह गाइड आपको ServBay में Next.js प्रोजेक्ट की क्रिएशन, डेवेलपमेंट मोड (रिवर्स प्रॉक्सी के माध्यम से), और प्रोडक्शन डिप्लॉयमेंट (स्टैटिक फाइल सर्विस के माध्यम से) के पूरे प्रोसेस से लेकर चलेगी।

आवश्यकताएँ

शुरू करने से पहले, कृपया यह सुनिश्चित कर लें:

1. आपने अपने macOS सिस्टम में ServBay सफलतापूर्वक इंस्टॉल कर रखा है।
2. ServBay के सॉफ़्टवेयर पैकेज प्रबंधन इंटरफ़ेस से आवश्यक Node.js पैकेज इंस्टॉल और इनेबल कर दिए हैं। अगर Node.js इंस्टॉल नहीं है, तो ServBay में Node.js पर्यावरण का उपयोग करें मार्गदर्शिका देखें।

संचालन के चरण

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

सबसे पहले, हमें एक नया Next.js प्रोजेक्ट इनिशियलाइज़ करना है।

1. टर्मिनल खोलें और ServBay के डिफॉल्ट वेबसाइट रूट डायरेक्टरी में जाएँ:

   cd /Applications/ServBay/www

2. create-next-app से प्रोजेक्ट बनायें: निम्नलिखित कमांड से नया Next.js प्रोजेक्ट बनाएँ। उदाहरण के लिए, हम प्रोजेक्ट का नाम servbay-next-app रखेंगे, जिससे /Applications/ServBay/www में इसी नाम की फोल्डर बनेगी।

   npx create-next-app@latest servbay-next-app

   npx Node.js पैकेज कमांड चलाने का टूल है, और create-next-app@latest Next.js का नवीनतम इनिशियलाइज़ेशन टूल है। टर्मिनल पर आने वाले निर्देशों को फ़ॉलो करें (जैसे TypeScript, ESLint, Tailwind CSS, App Router का चयन आदि)।

3. प्रोजेक्ट डायरेक्टरी में जाएँ और डिपेंडेंसी इंस्टॉल करें:

   cd servbay-next-app
   npm install

   npm install प्रोजेक्ट की package.json में लिखी गई आवश्यक निर्भरताएँ इंस्टॉल करता है।

2. प्रोजेक्ट का आउटपुट बदलें (वैकल्पिक)

प्रोजेक्ट के सफलतापूर्वक चलने की जाँच के लिए, हम होम पेज की सामग्री बदल सकते हैं।

1. pages/index.js फ़ाइल खोलें (अगर आपने Pages Router चुना है)। अगर App Router चुना है, तो app/page.js बदलें। यहाँ Pages Router का उदाहरण दिया गया है:

   # मनचाहे एडिटर से फ़ाइल खोलें, जैसे VS Code
   code pages/index.js

2. फ़ाइल की सामग्री बदलें जिससे वेबसाइट "Hello ServBay!" दिखाए। उदाहरण के लिए, फ़ाइल को इस तरह बदलें:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>This page is running via ServBay.</p>
       </div>
     );
   }

   अगर आप App Router (app/page.js) उपयोग कर रहे हैं, तो भी <h1> टैग ऐसे ही बदलें।

3. डेवेलपमेंट मोड में प्रवेश करें

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

1. Next.js डेवेलपमेंट सर्वर चलाएँ: प्रोजेक्ट रूट (/Applications/ServBay/www/servbay-next-app) में यह कमांड चलाएँ:

   npm run dev -- -p 8585

   यह कमांड Next.js डेवेलपमेंट सर्वर शुरू करेगा और -- -p 8585 से सर्वर को लोकल 8585 पोर्ट पर लिसन करने के लिए बताएगा। आप कोई और खाली पोर्ट चुन सकते हैं।

2. ServBay में वेबसाइट (रिवर्स प्रॉक्सी) सेट करें: ServBay का ऐप इंटरफ़ेस खोलें, और वेबसाइट प्रबंधन में जाएँ। नई वेबसाइट जोड़ें और ऐसे कॉन्फ़िगर करें:

   • नाम: My first Next.js dev site (या आपकी पसंद का नाम)
   • डोमेन: servbay-next-dev.servbay.demo (लोकल टेस्ट डोमेन के लिए .servbay.demo का सुझाव)
   • वेबसाइट प्रकार: रिवर्स प्रॉक्सी (Reverse Proxy)
   • प्रॉक्सी IP: 127.0.0.1 (लोकलहोस्ट)
   • प्रॉक्सी पोर्ट: 8585 (Next.js डेवेलपमेंट सर्वर का पोर्ट)

   सेटिंग सेव करें और लागू करें। ServBay खुद-ब-खुद आपकी सेटिंग के आधार पर Caddy या Nginx कॉन्फ़िगर कर देगा, जिससे servbay-next-dev.servbay.demo के सभी अनुरोध 127.0.0.1:8585 पर फॉरवर्ड होंगे।

   चरणबद्ध सेटअप के लिए देखें: ServBay में Node.js डेवेलपमेंट साइट जोड़ें।

3. डेवेलपमेंट मोड वेबसाइट खोलें: ब्राउज़र में जाकर अपना कॉन्फ़िगर डोमेन खोलें: https://servbay-next-dev.servbay.demo।

   ServBay डिफॉल्ट रूप से SSL सर्टिफिकेट (ServBay User CA द्वारा) प्रदान करता है, जिससे आपको HTTPS के जरिए बिना किसी ब्राउज़र वार्निंग के लोकल डेवेलपमेंट साइट मिलेगी। ServBay कस्टम डोमेन और मुफ़्त SSL सर्टिफिकेट्स भी सपोर्ट करता है — स्थानीय डेवेलपमेंट के लिए काफी सुविधाजनक।

4. प्रोडक्शन बिल्ड और स्टैटिक वेबसाइट डिप्लॉय करें

जब आपका प्रोजेक्ट तैयार हो जाए और आप उसे डिप्लॉय करना चाहें, तो एक ऑप्टिमाइज़्ड प्रोडक्शन बिल्ड बनाना आवश्यक है। अगर आपका Next.js प्रोजेक्ट स्टैटिक आउटपुट जनरेट करता है (output: 'export' या next export), तो ServBay की स्टैटिक वेबसाइट सेवा आदर्श है।

1. Next.js का प्रोडक्शन वर्शन बनाएँ और स्टैटिक फाइल एक्सपोर्ट करें: प्रोजेक्ट रूट (/Applications/ServBay/www/servbay-next-app) में ये कमांड्स चलाएँ:

   npm run build
   npm run export

   • npm run build कोड को ऑप्टिमाइज़ कर के प्रोडक्शन बिल्ड बनाएगा, जो .next डायरेक्टरी में मिलेगा।
   • npm run export (जैसे जरूरत हो वैसे कंफिगर करें) पूरी एप्लिकेशन को स्टैटिक HTML, CSS, JS में परिवर्तित करेगा और सब कुछ out डायरेक्टरी में रखेगा।

2. ServBay वेबसाइट (स्टैटिक फाइल सर्विस) कॉन्फ़िगर करें: ServBay ऐप खोलें, वेबसाइट प्रबंधन में जाएँ, नई वेबसाइट जोड़ें और ऐसे सेट करें:

   • नाम: My first Next.js production site (या आपकी पसंद का)
   • डोमेन: servbay-next-prod.servbay.demo (.servbay.demo अनुशंसित)
   • वेबसाइट प्रकार: स्टैटिक (Static)
   • रूट डायरेक्टरी: Next.js की out डायरेक्टरी की पूरी पथ, यानी /Applications/ServBay/www/servbay-next-app/out।

   सेटिंग सेव करें और लागू करें। अब ServBay का वेब सर्वर सीधे /Applications/ServBay/www/servbay-next-app/out से फाइल सर्व करेगा।

3. प्रोडक्शन मोड वेबसाइट खोलें: ब्राउज़र में अपना सेट डोमेन खोलें: https://servbay-next-prod.servbay.demo। यहाँ आपको Next.js द्वारा एक्सपोर्ट की गई स्टैटिक वेबसाइट दिखेगी।

   इसी तरह, ServBay द्वारा कस्टम डोमेन और ऑटो SSL सपोर्ट के कारण, आपके पास HTTPS के जरिए लोकल प्रोडक्शन पर्यावरण तैयार रहेगा।

निष्कर्ष

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