Next.js फ्रंटएंड उदाहरण चलाना
/frontend-examples/articles-with-tags-filter फ़ोल्डर में आपको एक Next.js एप्लिकेशन मिलेगा जो JSON ड्रॉप API का उपयोग करता है।
सारांश
यह एक Next.js एप्लिकेशन है जो JSON ड्रॉप API के साथ इंटीग्रेशन का प्रदर्शन करता है, ताकि लेखों को टैग्स के साथ प्रबंधित किया जा सके और फ़िल्टरिंग कार्यक्षमता सक्षम की जा सके।
पूर्वापेक्षाएँ
- Node.js (v18 या उससे अधिक)
- npm या pnpm पैकेज मैनेजर
- JSON ड्रॉप API इंस्टेंस तक पहुंच
इंस्टॉलेशन
- रिपॉजिटरी को क्लोन करें
- डिपेंडेंसीज़ इंस्टॉल करें:
npm install # या pnpm install
- एनवायरनमेंट वेरिएबल्स कॉन्फ़िगर करें:
- रूट डायरेक्टरी में एक
.envफ़ाइल बनाएँ - निम्नलिखित वेरिएबल सेट करें:
NEXT_PUBLIC_DRUPAL_BASE_URL="http://your-jsonapi-instance"
- रूट डायरेक्टरी में एक
एप्लिकेशन चलाना
डेवलपमेंट सर्वर शुरू करने के लिए:
npm run dev # या pnpm dev
एप्लिकेशन यहाँ उपलब्ध होगा: http://localhost:3000
उपलब्ध रूट्स
/- लेख सूची और टैग फ़िल्टरिंग वाला होम पेज/articles- लेख लिस्टिंग पेज/form- लेख बनाने/संपादित करने के लिए फ़ॉर्म पेज
कॉन्फ़िगरेशन
एनवायरनमेंट वेरिएबल्स
NEXT_PUBLIC_DRUPAL_BASE_URL- आपके JSON ड्रॉप API इंस्टेंस का बेस URL
डिपेंडेंसीज़
एप्लिकेशन कई प्रमुख डिपेंडेंसीज़ का उपयोग करता है:
- Next.js 15.1.0
- React 19
- API कॉल्स के लिए Axios
- स्टाइलिंग के लिए TailwindCSS
- Radix UI कॉम्पोनेंट्स
- फ़ॉर्म हैंडलिंग के लिए React Hook Form
सामान्य समस्याएँ
API कॉन्फ़िगरेशन
सुनिश्चित करें कि NEXT_PUBLIC_DRUPAL_BASE_URL एनवायरनमेंट वेरिएबल आपके JSON ड्रॉप API इंस्टेंस पर सही ढंग से सेट हो। गलत कॉन्फ़िगरेशन API रिक्वेस्ट असफल कर देगा।
CORS समस्याएँ
यदि आपको CORS त्रुटियाँ मिलती हैं, तो सुनिश्चित करें कि आपका JSON ड्रॉप API इंस्टेंस आपके डेवलपमेंट डोमेन (localhost:3000) से अनुरोध स्वीकार करने के लिए कॉन्फ़िगर किया गया है।
एनवायरनमेंट वेरिएबल्स
याद रखें कि NEXT_PUBLIC_ से शुरू होने वाले एनवायरनमेंट वेरिएबल्स ब्राउज़र में एक्सपोज़ किए जाते हैं। इन वेरिएबल्स में संवेदनशील जानकारी शामिल न करें।
प्रोडक्शन के लिए बिल्ड बनाना
प्रोडक्शन बिल्ड बनाने के लिए:
npm run build # या pnpm build
प्रोडक्शन सर्वर शुरू करने के लिए:
npm run start # या pnpm start
सपोर्ट
समस्याओं या प्रश्नों के लिए, कृपया प्रोजेक्ट डॉक्यूमेंटेशन देखें या रिपॉजिटरी में एक इश्यू बनाएं।