માં સામગ્રી અને સ્થિર ડેટાનું સંચાલન Next.js
એપ્લિકેશન વિકસાવવાની સફરમાં Next.js, સીમલેસ વપરાશકર્તા અનુભવ માટે સામગ્રી અને સ્થિર ડેટાને અસરકારક રીતે સંચાલિત કરવું આવશ્યક છે. આ લેખનો ઉપયોગ કરીને દસ્તાવેજીકરણ પૃષ્ઠો કેવી રીતે બનાવવું markdown અને public
માં ડિરેક્ટરીનો ઉપયોગ કરીને સ્થિર ડેટાને અસરકારક રીતે કેવી રીતે સંચાલિત કરવું તે શોધે છે Next.js.
સાથે દસ્તાવેજીકરણ પૃષ્ઠો બનાવી રહ્યા છે Markdown
દસ્તાવેજીકરણ એ કોઈપણ વેબ એપ્લિકેશનનો અભિન્ન ભાગ છે. માં, તમે હળવા વજનની માર્કઅપ ભાષાનો Next.js ઉપયોગ કરીને સરળતાથી દસ્તાવેજીકરણ પૃષ્ઠો બનાવી શકો છો. markdown આ હાંસલ કરવા માટે, અમે લાઇબ્રેરીનો ઉપયોગ કરી શકીએ છીએ react-markdown
, જે અમને markdown સામગ્રીને પ્રતિક્રિયા ઘટકો તરીકે રેન્ડર કરવાની મંજૂરી આપે છે.
પ્રથમ, ચાલો react-markdown
npm અથવા યાર્નનો ઉપયોગ કરીને લાઇબ્રેરી ઇન્સ્ટોલ કરીએ:
હવે, ચાલો ડિરેક્ટરીમાં નામનું દસ્તાવેજીકરણ પૃષ્ઠ documentation.md
બનાવીએ pages
:
આગળ, સામગ્રીને રેન્ડર કરવા માટે ડિરેક્ટરીમાં documentation.js
નામવાળી ફાઇલ બનાવો: pages
markdown
આ ઉદાહરણમાં, documentationContent
ચલ સામગ્રી સમાવે છે markdown, અને લાઇબ્રેરીમાંથી ReactMarkdown
ઘટકનો react-markdown
ઉપયોગ તેને HTML તરીકે રેન્ડર કરવા માટે થાય છે.
Public ડિરેક્ટરી સાથે સ્ટેટિક ડેટાનું સંચાલન
માં Next.js, public
ડિરેક્ટરી એ એક વિશિષ્ટ ફોલ્ડર છે જેનો ઉપયોગ સ્થિર અસ્કયામતો જેમ કે છબીઓ, ફોન્ટ્સ અને અન્ય ફાઇલોને સેવા આપવા માટે થાય છે. આ ડાયરેક્ટરી તમારી એપ્લિકેશનના રૂટમાંથી ઍક્સેસિબલ છે.
નિર્દેશિકામાં સ્થિત છબી શામેલ કરવા માટે public
, તમે તમારા ઘટકમાં નીચેના કોડનો ઉપયોગ કરી શકો છો:
image.png
આ કોડ નિર્દેશિકામાં સ્થિત નામની છબીનો સંદર્ભ આપશે public
.
નિષ્કર્ષ
markdown આ વિભાગમાં, તમે અને react-markdown
લાઇબ્રેરીનો ઉપયોગ કરીને દસ્તાવેજીકરણ પૃષ્ઠો કેવી રીતે બનાવવું, તેમજ public
માં ડિરેક્ટરીનો ઉપયોગ કરીને સ્ટેટિક ડેટાનું સંચાલન કેવી રીતે કરવું તે શીખ્યા છો Next.js. આ તકનીકો તમને વ્યાપક સામગ્રી પ્રદાન કરવામાં અને તમારી Next.js એપ્લિકેશનમાં સ્થિર સંપત્તિને અસરકારક રીતે સંચાલિત કરવામાં મદદ કરશે.