logo

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll
  1. मुख्य पृष्ठ
  2. JSON ड्रॉप API डॉक्यूमेंटेशन
  3. इंस्टॉलेशन JSON ड्रॉप API

Next.js फ्रंटएंड उदाहरण चलाना

06/09/2025, by Ivan
Download JSON Drop API

JSON Drop API Documentation

/frontend-examples/articles-with-tags-filter फ़ोल्डर में आपको एक Next.js एप्लिकेशन मिलेगा जो JSON ड्रॉप API का उपयोग करता है।

सारांश

यह एक Next.js एप्लिकेशन है जो JSON ड्रॉप API के साथ इंटीग्रेशन का प्रदर्शन करता है, ताकि लेखों को टैग्स के साथ प्रबंधित किया जा सके और फ़िल्टरिंग कार्यक्षमता सक्षम की जा सके।

Next.js app1
Next.js ऐप फ्रंटपेज
next.js articles
Next.js एप्लिकेशन आर्टिकल लिस्टिंग पेज।
Contact Us form
Next.js एप्लिकेशन संपर्क फ़ॉर्म।

पूर्वापेक्षाएँ

  • Node.js (v18 या उससे अधिक)
  • npm या pnpm पैकेज मैनेजर
  • JSON ड्रॉप API इंस्टेंस तक पहुंच

इंस्टॉलेशन

  1. रिपॉजिटरी को क्लोन करें
  2. डिपेंडेंसीज़ इंस्टॉल करें: 
    npm install
# या
pnpm install
  3. एनवायरनमेंट वेरिएबल्स कॉन्फ़िगर करें:
    • रूट डायरेक्टरी में एक .env फ़ाइल बनाएँ
    • निम्नलिखित वेरिएबल सेट करें: 
      NEXT_PUBLIC_DRUPAL_BASE_URL="http://your-jsonapi-instance"

एप्लिकेशन चलाना

डेवलपमेंट सर्वर शुरू करने के लिए:

npm run dev
# या
pnpm dev

एप्लिकेशन यहाँ उपलब्ध होगा: http://localhost:3000

npm run dev
Next.js के साथ एप्लिकेशन चलाना

उपलब्ध रूट्स

  • / - लेख सूची और टैग फ़िल्टरिंग वाला होम पेज
  • /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

सपोर्ट

समस्याओं या प्रश्नों के लिए, कृपया प्रोजेक्ट डॉक्यूमेंटेशन देखें या रिपॉजिटरी में एक इश्यू बनाएं।