માં સામગ્રી અને સ્થિર ડેટાનું સંચાલન 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 એપ્લિકેશનમાં સ્થિર સંપત્તિને અસરકારક રીતે સંચાલિત કરવામાં મદદ કરશે.