میں مواد اور جامد ڈیٹا کا انتظام Next.js

میں مواد اور جامد ڈیٹا کا انتظام Next.js

ایپلیکیشن تیار کرنے کے سفر میں Next.js ، بغیر کسی رکاوٹ کے صارف کے تجربے کے لیے مواد اور جامد ڈیٹا کا مؤثر طریقے سے انتظام ضروری ہے۔ یہ مضمون اس بات کی کھوج کرتا ہے کہ کس طرح استعمال کرکے دستاویزات کے صفحات بنائے جائیں markdown اور public میں ڈائرکٹری کا استعمال کرتے ہوئے جامد ڈیٹا کو مؤثر طریقے سے کیسے منظم کیا جائے Next.js ۔

کے ساتھ دستاویزی صفحات کی تخلیق Markdown

دستاویزات کسی بھی ویب ایپلیکیشن کا ایک لازمی حصہ ہے۔ میں ، آپ ہلکی پھلکی مارک اپ لینگویج کو Next.js استعمال کرکے آسانی سے دستاویزات کے صفحات بنا سکتے ہیں ۔ markdown اس کو حاصل کرنے کے لیے، ہم لائبریری کا استعمال کر سکتے ہیں react-markdown ، جو ہمیں markdown مواد کو React اجزاء کے طور پر پیش کرنے کی اجازت دیتا ہے۔

سب سے پہلے، آئیے 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 درخواست میں جامد اثاثوں کا مؤثر طریقے سے انتظام کرنے میں مدد کریں گی۔