प्रति माह 1 डॉलर से भी कम में एक स्थिर, व्यक्तिगत वेबसाइट कैसे बनाएं

इस पोस्ट का लक्ष्य आपको यह दिखाना है कि आप $1 प्रति माह से कम में अपनी खुद की स्थिर निजी वेबसाइट कैसे बना सकते हैं। मुझे पता है, आप शायद सोच रहे होंगे: "क्या मैंने इसे सही पढ़ा?"। तुमने किया! बेशक उस लक्ष्य तक पहुंचने के लिए कुछ सावधानियां हैं, लेकिन आपकी वेबसाइट की यात्रा की शुरुआत में, आपकी अपनी स्थिर वेबसाइट को होस्ट करने के लिए वास्तव में प्रति माह केवल $0.01 का खर्च आना चाहिए। इस पोस्ट के लिए लक्षित दर्शक कुछ जावास्क्रिप्ट अनुभव और वेब विकास की सामान्य समझ रखने वाला कोई भी व्यक्ति है। यदि आपके पास वह पृष्ठभूमि नहीं है, तो चिंता न करें! मैं इस पोस्ट में विचारों और अवधारणाओं को समझाने की पूरी कोशिश करूंगा ताकि कोई भी इसका अनुसरण कर सके!

शुरू करने से पहले, आइए कुछ परिभाषाएँ प्राप्त करें जिससे हमें उन विभिन्न शब्दों को समझने में मदद मिलेगी जिनका उपयोग हम अपनी पहली साइट बनाने के लिए करेंगे। जैसे ही हम अपनी साइट को Google क्लाउड में जोड़ने की प्रक्रिया से गुजरते हैं, बेझिझक इन परिभाषाओं का संदर्भ लें:

• वेबसाइट डोमेन: इंटरनेट पर किसी वेबसाइट की पहचान करने के लिए उपयोग किया जाने वाला पता, जैसे yelp.com
• डोमेन पंजीकरण प्रदाता: डोमेन का एक प्रदाता, जहां आप एक कस्टम डोमेन खरीद सकते हैं
• स्टेटिक वेबसाइट: HTML, CSS और जावास्क्रिप्ट फ़ाइलों के किसी भी संयोजन की एक निश्चित संख्या के साथ बनाई गई वेबसाइट
• Next.js: एक React.js फ्रेमवर्क जो सर्वर साइड रेंडरिंग और स्टैटिक साइट जेनरेशन का समर्थन करता है
• स्टोरेज ऑब्जेक्ट: स्टोरेज, थिंक फोटो या वीडियो या वास्तव में किसी अन्य प्रकार की फ़ाइल के लिए उपयोग की जाने वाली इकाई
• Google क्लाउड: एक क्लाउड कंप्यूटिंग प्लेटफ़ॉर्म जो विभिन्न प्रकार की सेवाएँ प्रदान करता है, हम भंडारण से संबंधित हैं
• Google क्लाउड स्टोरेज: Google क्लाउड की ऑब्जेक्ट स्टोरेज सेवा, हम इसका उपयोग अपनी वेबसाइट की स्थिर फ़ाइलों को संग्रहीत करने के लिए करेंगे
• बकेट (Google क्लाउड स्टोरेज): एक कंटेनर जिसमें आपकी वेबसाइट की फ़ाइलें होती हैं

यह आलेख मानता है कि पाठक को वेबसाइट विकास और प्रोग्रामिंग का कुछ मूलभूत ज्ञान है। मैं मान लूंगा कि प्रत्येक पाठक के पास निम्नलिखित है:

• वेबसाइट विकास की आधारभूत समझ - वेब विकास का परिचय (freecodecamp.org)
• एनपीएम के साथ अनुभव
• React.js और Next.js का शुरुआती ज्ञान
• सीएलआई के साथ आराम
• उदाहरण के लिए, आपके कंप्यूटर पर स्थापित एक आईडीई - VSCode वह है जिसका मैं उपयोग करता हूं

मैं किसी लक्ष्य को काम के क्रमिक टुकड़ों में बांटकर बेहतर सोचता हूं। आइए अपने कार्यों को उसी तरह से तैयार करें जैसे हम अपनी वेबसाइट बनाते हैं:

1. स्थापित करना
2. हमारी साइट के लिए स्टार्टर कोड
3. हमारी साइट के लिए एक बकेट कॉन्फ़िगर करना
4. अगले चरण 😎

स्थापित करना

यदि आप अपनी निजी वेबसाइट बनाना चाहते हैं तो आरंभ करने के लिए आपको एक डोमेन की आवश्यकता होगी। हालाँकि हम शुरुआत में इसका उपयोग नहीं करेंगे, लेकिन अभी ऐसा करना उचित है ताकि हम बाद के लेख में कस्टम डोमेन का उपयोग कर सकें। मेरे लिए, मेरा डोमेन afro-cloud.com था, लेकिन जब तक पंजीकरण प्रदाता के पास डोमेन उपलब्ध है तब तक आप वास्तव में जो भी मन में आए उसे चुन सकते हैं। ऐसे कई डोमेन पंजीकरण प्रदाता हैं जिनका आप उपयोग कर सकते हैं, मैंने व्यक्तिगत रूप से GoDaddy का उपयोग किया है, लेकिन यहां विकल्पों का एक उपसमूह उपलब्ध है (मैं इनमें से किसी भी सेवा से संबद्ध नहीं हूं):

• शाबाश डैडी
• ब्लूहोस्ट
• स्क्वैरस्पेस

अब जब हमने अपना डोमेन सेट कर लिया है, तो आइए एक Google क्लाउड खाता बनाएं और बिलिंग सक्षम करें।

1. Google क्लाउड कंसोल पर नेविगेट करें
2. कंसोल में प्रवेश करने के लिए मौजूदा Google खाते का उपयोग करें या एक नया खाता बनाएं (Google क्लाउड का उपयोग करने के लिए यह आवश्यक है)
3. स्क्रीन के शीर्ष बार पर प्रोजेक्ट चयन ड्रॉपडाउन पर क्लिक करके एक नया प्रोजेक्ट बनाएं
4. "बिलिंग" पर जाएँ
5. Google क्लाउड द्वारा दिए गए निर्देशों का पालन करते हुए एक नया बिलिंग खाता बनाएं

महान! अब बिलिंग सक्षम होने के साथ, हम Google क्लाउड सेवाओं का उपयोग शुरू कर सकते हैं। अभी हम इस टैब के साथ पूरी तरह तैयार हैं, लेकिन हम लेख में बाद में इस पृष्ठ पर वापस आएंगे इसलिए इसे संभाल कर रखें।

हमारी साइट के लिए स्टार्टर कोड

यदि आपको इस लेख में आने वाले चरणों का पालन करने में परेशानी हो रही है तो कृपया संपर्क करें और मैं समस्या को सुलझाने में मदद करने की पूरी कोशिश करूंगा। ठीक है, इसे ठीक करने के साथ चलिए आगे बढ़ते हैं। हम उनके स्थिर निर्यात समर्थन के कारण अन्य React.js फ्रेमवर्क (या सिर्फ React) के विपरीत Next.js का उपयोग करेंगे। React.js एप्लिकेशन को होस्ट करने के लिए कई अलग-अलग परिनियोजन विकल्प हैं, लेकिन मैंने SEO लाभों और लागत बचत के कारण Google क्लाउड स्टोरेज और Next.js दृष्टिकोण को साझा करना चुना है। नेक्स्ट.जेएस स्थिर निर्यात के साथ, जब कोई उत्पादन निर्माण किया जाता है, तो प्रति रूट एक HTML फ़ाइल बनाई जाती है, साथ ही स्थिर संपत्ति (सीएसएस और जेएस फ़ाइलें) जो अलग-अलग हिस्सों में HTML फ़ाइल से मेल खाती हैं। यह महत्वपूर्ण है क्योंकि यह देखे जा रहे पेज के लिए अनावश्यक जावास्क्रिप्ट बंडलों को लोड करने से बच सकता है जिसका अर्थ है कि पेज तेजी से लोड होता है। "अगला बिल्ड" चलाने से उत्पन्न सभी फ़ाइलें "आउट" फ़ोल्डर में निर्यात की जाएंगी। लेकिन इस पर बाद में और अधिक जानकारी। चलिए ऐप बनाते हैं.

सबसे पहले, आइए अपनी मशीन पर एक स्टार्टर नेक्स्ट.जेएस प्रोजेक्ट स्थापित करें। सौभाग्य से, नेक्स्ट.जेएस में उन लोगों के लिए क्रिएट रिएक्ट ऐप की तरह ही एक "क्रिएट-नेक्स्ट-ऐप" उपयोगिता है, जिन्होंने इसका उपयोग किया है। वर्कफ़्लो आरंभ करने के लिए हम निम्नलिखित कमांड चला सकते हैं:

npx create-next-app@latest

कमांड हमें हमारे प्रोजेक्ट के लिए कुछ कॉन्फ़िगरेशन विकल्पों के माध्यम से ले जाएगा (जो भी आप चाहें उसे चुनने के लिए स्वतंत्र महसूस करें; हमें बस कोड जनरेशन की आवश्यकता है)। मैंने उन विकल्पों को बोल्ड कर दिया है जिनका मैं इस आलेख के लिए उपयोग करूँगा:

• आपके प्रोजेक्ट का नाम क्या है? मेरे-ऐप
• क्या आप टाइपस्क्रिप्ट का उपयोग करना चाहेंगे? नहीं हां
• क्या आप ESLint का उपयोग करना चाहेंगे? नहीं हां
• क्या आप टेलविंड सीएसएस का उपयोग करना चाहेंगे? नहीं हां
• क्या आप `src/` निर्देशिका का उपयोग करना चाहेंगे? नहीं हां
• क्या आप ऐप राउटर का उपयोग करना चाहेंगे? (अनुशंसित) नहीं/ हां
• क्या आप डिफ़ॉल्ट आयात उपनाम (@/*) को अनुकूलित करना चाहेंगे? नहीं हां

बढ़िया, अब हमारे पास कुछ कोड है! आप देखेंगे कि हमारा नोड_मॉड्यूल फ़ोल्डर भर गया है, इसलिए हमारे पास वे सभी निर्भरताएँ स्थापित हैं जिनकी हमें अपना एप्लिकेशन चलाने के लिए आवश्यकता है। उसी टर्मिनल विंडो में जिसका उपयोग आपने प्रोजेक्ट बनाने के लिए किया था, आइए निम्नलिखित कमांड चलाएँ: npm run dev । यह Next.js डेवलपमेंट वर्कफ़्लो शुरू करेगा ताकि हम अपने एप्लिकेशन को स्थानीय रूप से देख सकें। Next.js आपके कंप्यूटर पर प्रोजेक्ट देखने के लिए एक URL प्रदान करेगा। अधिकांश मामलों में यह http://localhost:3000 होगा, लेकिन यदि आपके पास कोई अन्य वेब ऐप चल रहा है तो यह 3001 जैसे किसी अन्य पोर्ट का चयन कर सकता है। लिंक पर क्लिक करने पर आपको निम्न जैसा कुछ देखना चाहिए:

अच्छा! हमारे पास एक स्टार्टर एप्लिकेशन चालू है और चल रहा है! लेकिन आइए अधिक शास्त्रीय "हैलो वर्ल्ड" उदाहरण के लिए स्टार्टर पेज से छुटकारा पाएं। निम्नलिखित को शामिल करने के लिए src/app/page.tsx (या page.jsx) फ़ाइल को अपडेट करें:

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

फ़ाइल को सहेजें और अपने एप्लिकेशन पर चल रहे ब्राउज़र टैब पर वापस जाएँ और पृष्ठ को पुनः लोड करें। आपको अपनी स्क्रीन पर "हैलो वर्ल्ड" देखना चाहिए! आइए अब स्थैतिक निर्यात को काम पर लाने की ओर वापस जाएँ। सुविधा को सक्षम करने के लिए हमें अपनी अगली.कॉन्फिग फ़ाइल को कॉन्फ़िगर करने की आवश्यकता होगी। अगली कॉन्फ़िग घोषणा को इस प्रकार अद्यतन करें:

const nextConfig = { output: "export", };

यह बिल्ड प्रक्रिया के दौरान Next.js को हमारे एप्लिकेशन के भीतर प्रत्येक रूट के अनुरूप अलग-अलग HTML फ़ाइलें बनाने का निर्देश देगा। फिलहाल हमारे पास केवल एक पेज है तो चलिए स्थिर निर्यात के लाभों को दर्शाने के लिए एक और पेज जोड़ते हैं। ऐप/निर्देशिका के भीतर, "परीक्षण" नामक एक नई निर्देशिका बनाएं। नव निर्मित निर्देशिका में एक page.tsx (या page.jsx) फ़ाइल जोड़ें और निम्नलिखित कोड जोड़ें:

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

अब जबकि हमारे पास एक परीक्षण पृष्ठ है, आइए अपने होम पेज से इसमें एक लिंक जोड़ें। src/app/page.tsx (या page.jsx) खोलें और फ़ाइल को अपडेट करें ताकि यह इस तरह दिखे:

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

नई अपडेट की गई फ़ाइलों को सहेजें और हमारे एप्लिकेशन को चलाने वाले ब्राउज़र टैब पर वापस जाएं और पेज को फिर से लोड करें। आपको "टेस्ट पेज!" के साथ एक नया लिंक देखना चाहिए! और उस लिंक पर क्लिक करने पर, स्क्रीन पर सामग्री "हैलो टेस्ट!" में बदल जानी चाहिए। अच्छा काम, अब हमारे एप्लिकेशन में दो मार्ग हैं। आइए अब हम जिस स्थिर निर्यात सुविधा के बारे में बात कर रहे हैं उसका आउटपुट देखें। अपने टर्मिनल विंडो पर वापस जाकर "एनपीएम रन बिल्ड" चलाएं। यह कमांड "नेक्स्ट बिल्ड" कमांड चलाएगा जो हमारे काम के लिए एक प्रोडक्शन रेडी बिल्ड बनाएगा और परिणाम को हमारे प्रोजेक्ट के रूट पर कॉल की गई डायरेक्टरी में स्टोर करेगा। यदि हम आउट निर्देशिका का निरीक्षण करते हैं तो हमें कुछ इस तरह देखना चाहिए:

• _नेक्स्ट: इसमें हमारी साइट को चलाने के लिए आवश्यक स्थैतिक संपत्तियां शामिल हैं, प्रत्येक HTML पेज के लिए जावास्क्रिप्ट और सीएसएस के कुछ हिस्सों पर विचार करें (उदाहरण के लिए 404.html: डिफ़ॉल्ट 404 पेज है Next.js हमारे लिए उत्पन्न होता है
• favicon.ico: हमारी साइट के लिए वेबसाइट आइकन
• Index.html: हमारे रूट पेज के लिए HTML फ़ाइल (src/app/page.tsx या page.jsx)
• Index.txt: फ़ाइल जिसमें Index.html पेज के लिए संसाधनों की मैपिंग शामिल है
• test.html: हमारे रूट पेज के लिए HTML फ़ाइल (src/app/test/page.tsx या page.jsx)
• test.txt: फ़ाइल जिसमें test.html पृष्ठ के लिए संसाधनों की मैपिंग शामिल है

बढ़िया काम दोस्तों. आइए अब अपना कोड Google क्लाउड पर अपलोड करने के लिए गियर बदलें ताकि हम साइट को लाइव देख सकें।

हमारी साइट के लिए एक बकेट कॉन्फ़िगर करना

अब जब हमारे पास अपना कोड तैयार है, तो हमें इसे Google क्लाउड स्टोरेज पर अपलोड करना होगा ताकि Google क्लाउड हमारी साइट को इंटरनेट पर सेवा प्रदान कर सके। आइए Google क्लाउड टैब पर वापस जाएं।

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

अब जब हमने बकेट बना लिया है तो हमें एक नई अनुमति जोड़ने की आवश्यकता होगी ताकि उपयोगकर्ता हमारी बकेट फ़ाइलें देख सकें। "अनुमतियाँ" टैब चुनें और "एक्सेस प्रदान करें" बटन पर क्लिक करें। "नए प्रिंसिपल" के भीतर "सभी उपयोगकर्ता" में इनपुट प्रकार और "पर्यावरण और भंडारण ऑब्जेक्ट व्यूअर" के लिए "क्लाउड स्टोरेज" के तहत भूमिका का चयन करें।

एक संवाद खुलेगा जिसमें पूछा जाएगा कि क्या हम अपनी बकेट को सार्वजनिक करना चाहते हैं या नहीं, जो हम करते हैं, इसलिए "सार्वजनिक पहुंच की अनुमति दें" चुनें। इसलिए "सार्वजनिक पहुंच की अनुमति दें" चुनें। अब इस बकेट की फ़ाइलें सार्वजनिक रूप से पहुंच योग्य होंगी. अपने बकेट विवरण पृष्ठ से पिछला तीर क्लिक करके अवलोकन पृष्ठ पर वापस जाएँ। आपको अपनी नव निर्मित बकेट को हमारे द्वारा उपयोग किए गए कॉन्फ़िगरेशन विकल्पों के साथ देखना चाहिए। आगे हमें अपनी वेबसाइट की बकेट को निर्देश देने की आवश्यकता होगी और हम नव निर्मित बकेट की पंक्ति के तीन बिंदुओं पर क्लिक करके ऐसा कर सकते हैं। "वेबसाइट कॉन्फ़िगरेशन संपादित करें" चुनें और आपको कुछ इस तरह देखना चाहिए:

इंडेक्स पेज इनपुट के लिए, "index.html" टाइप करें और त्रुटि पेज इनपुट के लिए "404.html" टाइप करें। आप देखेंगे कि ये फ़ाइलें हमारे Next.js एप्लिकेशन के बिल्ड आउटपुट से मेल खाती हैं जो हम चाहते हैं और शीघ्र ही उपयोग करेंगे। सहेजें पर क्लिक करके परिवर्तन समाप्त करें.

अब हमें अपने कोड की आउट डायरेक्टरी में मौजूद अपनी फाइलों को इस बकेट में अपलोड करना होगा ताकि हमारी वेबसाइट लाइव हो सके! हम अपनी बकेट के बकेट विवरण पृष्ठ पर जाकर और प्रत्येक फ़ाइल या फ़ोल्डर को व्यक्तिगत रूप से चुनकर इसे मैन्युअल रूप से कर सकते हैं। लेकिन, आइए इसके बारे में प्रोग्रामेटिक बनें और ऐसा करने के लिए कुछ कोड लिखें। अपनी आईडीई पर या जहां भी आप अपने कोड में अपडेट कर रहे हैं वहां वापस जाएं और हमारे प्रोजेक्ट के मूल में upload.sh नामक एक नई फ़ाइल बनाएं। निम्नलिखित सामग्री जोड़ें:

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

"somerandombucket123" को अपने बकेट नाम से बदलना सुनिश्चित करें। यहां कोड के शब्दार्थ के बारे में बहुत अधिक चिंता न करें। मूलतः हम जो कर रहे हैं वह है:

1. किसी भी पुराने उत्पादन निर्माण को हटाना
2. एक नया प्रोडक्शन बिल्ड बनाना
3. हमारे उत्पादन निर्माण की सामग्री को हमारी बकेट में अपलोड करने के लिए Google क्लाउड सीएलआई का उपयोग करना

इस स्क्रिप्ट को चलाने से पहले हमें Google क्लाउड CLI डाउनलोड करना होगा। आप यहां दिए गए निर्देशों का पालन कर सकते हैं. इंस्टालेशन के बाद, आपको अपने टर्मिनल में gcloud auth लॉगिन चलाने की आवश्यकता होगी। यह हमारे लिए Google क्लाउड CLI का उपयोग करने के लिए पहुंच को अधिकृत करेगा। उस पर अधिक निर्देश और पृष्ठभूमि उनके दस्तावेज़ में पाई जा सकती है। एक बार जब आप सफलतापूर्वक अधिकृत हो जाएं, तो आइए हमारे package.json में एक नई रन स्क्रिप्ट जोड़ें। हमारी अपलोड स्क्रिप्ट को पंजीकृत करने के लिए "स्क्रिप्ट" ऑब्जेक्ट के भीतर एक नई स्क्रिप्ट प्रविष्टि जोड़ें:

"upload": "sh upload.sh"

आगे, आइए इसका परीक्षण करें। अपना टर्मिनल दोबारा खोलें और चलाएं: "npm run upload"। यह हमारी स्क्रिप्ट को निष्पादित करेगा और आपको अपने बकेट में होने वाले अपलोड के बारे में कुछ आउटपुट देखना चाहिए। यदि हम Google क्लाउड स्टोरेज पेज पर वापस जाते हैं और आपकी बकेट खोलते हैं तो आपको वे फ़ाइलें दिखनी चाहिए जिन्हें हमने अभी अपलोड किया है। यदि आप इस पर नेविगेट करते हैं: https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html (जहां YOUR_BUCKET_NAME आपके बकेट का नाम है) तो आपको साइट देखनी चाहिए। लेकिन आप देखेंगे कि डिफ़ॉल्ट Next.js स्टाइल ख़त्म हो गया है और हमारे परीक्षण पृष्ठ का लिंक टूट गया है। कोई विचार क्यों?

यदि आप अपना ब्राउज़र कंसोल खोलते हैं तो आपको बहुत सारी रिसोर्स नॉट फाउंड त्रुटियाँ दिखाई देंगी। दूसरे शब्दों में, ब्राउज़र उन फ़ाइलों को नहीं ढूँढ सकता जिन्हें उसे आपकी साइट के लिए लोड करने का निर्देश दिया गया था। यदि आप बारीकी से देखें, तो आप देख सकते हैं कि संसाधन के लिए यूआरएल बिल्कुल सही नहीं है, इसमें पथ में हमारा बकेट नाम गायब है। यदि हमने एक कस्टम डोमेन का उपयोग किया होता और DNS को ठीक से कॉन्फ़िगर किया होता, तो हमें इस समस्या का सामना नहीं करना पड़ता। लेकिन इस पोस्ट के प्रयोजनों के लिए, आइए रूटिंग को ठीक करने के लिए कुछ अतिरिक्त कोड जोड़ें। src/app/page.tsx (या page.jsx) खोलें और फ़ाइल को अपडेट करें ताकि यह इस तरह दिखे:

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

"somerandombucket123" को अपने बकेट नाम से बदलना सुनिश्चित करें। इसके बाद नेक्स्ट.कॉन्फ़िग फ़ाइल को इस प्रकार अपडेट करें:

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

पुनः, "somerandombucket123" को अपने बकेट नाम से बदलना सुनिश्चित करें। आप उपरोक्त कोड स्निपेट में देखेंगे कि जब नोड पर्यावरण चर का उत्पादन होता है (नेक्स्ट.जेएस द्वारा सेट) तो हमने अपने बकेट नाम के लिए अतिरिक्त तर्क जोड़ा है। हम कॉन्फिग फाइल में रिसोर्स नॉट फाउंड एरर को ठीक करने के लिए एक एसेट प्रीफिक्स जोड़ रहे हैं और अपने बकेट नाम के साथ रूट को प्रीफिक्स करके अपने होम पेज में रूटिंग एरर को ध्यान में रख रहे हैं। आइए अब अपना कोड अपलोड करें और देखें कि यह काम करता है या नहीं। एक बार फिर, शुरुआत करें: एनपीएम रन अपलोड। अपनी वेबसाइट पर वापस जाएँ और पृष्ठ पुनः लोड करें। हमने कैसे किया? साइट को यह प्रतिबिंबित करना चाहिए कि हमारे पास अभी स्थानीय स्तर पर क्या है। प्रक्रिया की शुरुआत में यदि हम अपने डोमेन नाम से मेल खाने के लिए बकेट बनाते हैं तो हमारे पास संसाधन त्रुटियां होंगी लेकिन फिर भी क्लाइंट रूटिंग समस्या होगी। इसलिए दुर्भाग्य से, इस दृष्टिकोण का एक दोष उत्पादन सेवा के लिए मार्गों में .html प्रत्यय जोड़ने के लिए आवश्यक अतिरिक्त कोड है।

अगले चरण 😎

बाद में, मैं कस्टम डोमेन की सेवा के लिए हमारे बकेट में आवश्यक डीएनएस रिकॉर्ड और कॉन्फ़िगरेशन परिवर्तनों को जोड़ने के साथ-साथ हमारी वेबसाइट के लिए एसएसएल को कॉन्फ़िगर करने के बारे में बताऊंगा। उम्मीद है कि आपने आज कुछ सीखा है और भविष्य में मैं कुछ विचारों के बारे में बात करूंगा:

• पेज रीडायरेक्ट और एसएसएल के लिए क्लाउडफ्लेयर के फ्री टियर का उपयोग करना
• Google Analytics को कॉन्फ़िगर करना और SEO को अनुकूलित करना

पढ़ने के लिए धन्यवाद और जयकार!