मध्ये सामग्री आणि स्थिर डेटा व्यवस्थापित करणे 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 आणि ReactMarkdown लायब्ररीतील घटक react-markdown HTML म्हणून प्रस्तुत करण्यासाठी वापरला जातो.

Public निर्देशिकेसह स्थिर डेटा व्यवस्थापित करणे

मध्ये Next.js, public निर्देशिका ही प्रतिमा, फॉन्ट आणि इतर फाइल्स सारख्या स्थिर मालमत्तांसाठी वापरण्यात येणारे एक विशेष फोल्डर आहे. ही डिरेक्टरी तुमच्या ऍप्लिकेशनच्या रूटवरून ऍक्सेस करण्यायोग्य आहे.

निर्देशिकेत असलेली प्रतिमा समाविष्ट करण्यासाठी public, तुम्ही तुमच्या घटकामध्ये खालील कोड वापरू शकता:

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

image.png हा कोड निर्देशिकेत असलेल्या प्रतिमेचा संदर्भ देईल public.

निष्कर्ष

या विभागात, तुम्ही लायब्ररी markdown आणि react-markdown लायब्ररी वापरून दस्तऐवजीकरण पृष्ठे कशी तयार करावी, तसेच public मधील निर्देशिकेचा वापर करून स्थिर डेटा कसा व्यवस्थापित करावा हे शिकले आहे Next.js. ही तंत्रे तुम्हाला सर्वसमावेशक सामग्री प्रदान करण्यात आणि तुमच्या अर्जातील स्थिर मालमत्ता प्रभावीपणे व्यवस्थापित करण्यात मदत करतील Next.js.