मा सामग्री र स्थिर डाटा व्यवस्थापन Next.js

मा सामग्री र स्थिर डाटा व्यवस्थापन Next.js

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

संग कागजात पृष्ठहरू सिर्जना गर्दै Markdown

कागजात कुनै पनि वेब अनुप्रयोगको अभिन्न अंग हो। मा, तपाईले हल्का मार्कअप भाषा Next.js प्रयोग गरेर सजिलैसँग कागजात पृष्ठहरू सिर्जना गर्न सक्नुहुन्छ । markdown यो प्राप्त गर्न, हामी पुस्तकालयको प्रयोग गर्न सक्छौं, जसले हामीलाई सामग्रीलाई प्रतिक्रिया कम्पोनेन्टको रूपमा react-markdown प्रस्तुत गर्न अनुमति दिन्छ । markdown

react-markdown पहिले, npm वा यार्न प्रयोग गरेर पुस्तकालय स्थापना गरौं:

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 यी प्रविधिहरूले तपाईंलाई व्यापक सामग्री प्रदान गर्न र तपाईंको अनुप्रयोगमा स्थिर सम्पत्तिहरू प्रभावकारी रूपमा व्यवस्थापन गर्न मद्दत गर्नेछ ।