உள்ளடக்கம் மற்றும் நிலையான தரவை நிர்வகித்தல் 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