ਵਿੱਚ ਸਮੱਗਰੀ ਅਤੇ ਸਥਿਰ ਡੇਟਾ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ 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 ਇਹ ਤਕਨੀਕਾਂ ਤੁਹਾਨੂੰ ਵਿਆਪਕ ਸਮੱਗਰੀ ਪ੍ਰਦਾਨ ਕਰਨ ਅਤੇ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸਥਿਰ ਸੰਪਤੀਆਂ ਦਾ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਬੰਧਨ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨਗੀਆਂ ।