মধ্যে বিষয়বস্তু এবং স্ট্যাটিক ডেটা পরিচালনা 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 অ্যাপ্লিকেশনে স্থিতিশীল সম্পদগুলি কার্যকরভাবে পরিচালনা করতে সহায়তা করবে।