में सामग्री और स्थैतिक डेटा का प्रबंधन करना Next.js

में सामग्री और स्थैतिक डेटा का प्रबंधन करना Next.js

किसी एप्लिकेशन को विकसित करने की यात्रा में Next.js, सहज उपयोगकर्ता अनुभव के लिए सामग्री और स्थैतिक डेटा को कुशलतापूर्वक प्रबंधित करना आवश्यक है। यह आलेख बताता है कि दस्तावेज़ीकरण पृष्ठ कैसे बनाएं markdown और public निर्देशिका का उपयोग करके स्थैतिक डेटा को प्रभावी ढंग से कैसे प्रबंधित करें Next.js ।

के साथ दस्तावेज़ीकरण पृष्ठ बनाना Markdown

दस्तावेज़ीकरण किसी भी वेब एप्लिकेशन का एक अभिन्न अंग है। में, आप एक हल्की मार्कअप भाषा का Next.js उपयोग करके आसानी से दस्तावेज़ीकरण पृष्ठ बना सकते हैं । markdown इसे प्राप्त करने के लिए, हम लाइब्रेरी का उपयोग कर सकते हैं react-markdown, जो हमें markdown सामग्री को रिएक्ट घटकों के रूप में प्रस्तुत करने की अनुमति देता है।

सबसे पहले, आइए react-markdown एनपीएम या यार्न का उपयोग करके लाइब्रेरी स्थापित करें:

npm install react-markdown  
# or  
yarn add react-markdown  

अब, आइए निर्देशिका documentation.md में नामित एक दस्तावेज़ पृष्ठ बनाएं pages:

# Welcome to Our Documentation  
  
In this section, we'll explore the features of our application and how to get started.  
  
## Getting Started  
  
To start using our application, follow these steps...  
  
## Features  
  
Our application offers the following features...  
  

इसके बाद, सामग्री को प्रस्तुत करने के लिए निर्देशिका documentation.js में नामित एक फ़ाइल बनाएं: pages markdown

import React from 'react';  
import ReactMarkdown from 'react-markdown';  
  
const documentationContent = `# Welcome to Our Documentation\n\nIn this section, we'll explore the features of our application and how to get started.\n\n## Getting Started\n\nTo start using our application, follow these steps...\n\n## Features\n\nOur application offers the following features...`;  
  
function Documentation() {  
  return( 
    <div>  
      <h1>Documentation</h1>  
      <ReactMarkdown>{documentationContent}</ReactMarkdown>  
    </div>  
 );  
}  
  
export default Documentation;  

इस उदाहरण में, documentationContent वेरिएबल में सामग्री शामिल है markdown, और इसे HTML के रूप में प्रस्तुत करने के लिए लाइब्रेरी ReactMarkdown के घटक का उपयोग किया जाता है। react-markdown

Public निर्देशिका के साथ स्थैतिक डेटा का प्रबंधन

में Next.js, public निर्देशिका एक विशेष फ़ोल्डर है जिसका उपयोग छवियों, फ़ॉन्ट और अन्य फ़ाइलों जैसी स्थिर संपत्तियों की सेवा के लिए किया जाता है। यह निर्देशिका आपके एप्लिकेशन के रूट से पहुंच योग्य है।

निर्देशिका में स्थित एक छवि को शामिल करने के लिए public, आप अपने घटक में निम्नलिखित कोड का उपयोग कर सकते हैं:

<img src="/image.png" alt="An example image" />

यह कोड निर्देशिका image.png में स्थित नामित छवि को संदर्भित करेगा । public

निष्कर्ष

इस अनुभाग में, आपने सीखा कि लाइब्रेरी का उपयोग करके दस्तावेज़ पृष्ठ कैसे बनाएं markdown, react-markdown साथ ही public निर्देशिका का उपयोग करके स्थिर डेटा कैसे प्रबंधित करें Next.js । ये तकनीकें आपको व्यापक सामग्री प्रदान करने और आपके Next.js एप्लिकेशन में स्थिर संपत्तियों को प्रभावी ढंग से प्रबंधित करने में मदद करेंगी।