સામગ્રીનું કોષ્ટક[છુપાવો][બતાવો]
સૉફ્ટવેર લાઇબ્રેરી અથવા ફ્રેમવર્ક પસંદ કરતી વખતે, વિકાસકર્તાના અનુભવને સામાન્ય રીતે ધ્યાનમાં લેવામાં આવે છે.
જ્યારે હું "વિકાસકર્તા અનુભવ" નો ઉલ્લેખ કરું છું, ત્યારે હું વિકાસકર્તાઓ ખરેખર કેવી રીતે કાર્ય કરે છે તેનો ઉલ્લેખ કરું છું. વિકાસકર્તાઓ લાઇબ્રેરીઓ અથવા ફ્રેમવર્ક પસંદ કરે છે જે વાપરવા માટે આનંદદાયક હોય.
અમારી પાસે હવે સૌથી વધુ લોકપ્રિય પુસ્તકાલયો અને ફ્રેમવર્ક શા માટે છે તેનું આ એક પ્રાથમિક કારણ છે. વિકાસકર્તાઓ તરીકે, જ્યારે અમારા કાર્યોમાં અમને સહાય કરવા માટે અસ્તિત્વમાં છે તેવા સાધનો બનાવવામાં આવ્યા હોય ત્યારે અમારે શરૂઆતથી શરૂઆત કરવાની જરૂર નથી.
ફ્રેમવર્ક એ સોફ્ટવેરના ટુકડા છે જે વિકાસકર્તાઓ દ્વારા એપ્લિકેશન બનાવવા માટે બનાવવામાં આવે છે અને ઉપયોગમાં લેવાય છે, અને નેક્સ્ટજેએસ તેમાંથી એક છે.
આ પોસ્ટમાં, અમે Nextjs, તેની મુખ્ય વિશેષતાઓ અને એપ્લિકેશન બનાવવા માટે તેનો ઉપયોગ કેવી રીતે કરી શકીએ તેના પર જઈશું. ચાલો સીધા જ અંદર જઈએ.
Next.js શું છે?
Next.js સ્થિર વેબપેજ અને પ્રતિક્રિયા-આધારિત ઓનલાઈન એપ્લિકેશનને ઝડપથી અને સરળતાથી બનાવવા માટે જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક છે. તે તમને વિન્ડોઝ, લિનક્સ અને મેક સહિત વિવિધ પ્લેટફોર્મ્સ માટે શ્રેષ્ઠ વેબ એપ્લિકેશન્સ ડિઝાઇન કરવાની મંજૂરી આપે છે.
જો તમારી પાસે પ્રતિક્રિયા સાથે ન્યૂનતમ પરિચય હોય અને તમે પ્રતિક્રિયા ઇકોસિસ્ટમ વિશે વધુ જાણવા માંગતા હોવ તો તમારે Next.js ફ્રેમવર્કથી પરિચિત હોવા જોઈએ.
ભલે Next.js તમને પ્રારંભ કરવા માટે જરૂરી દરેક વસ્તુ સાથે આવે છે, તમે NPM અને યાર્ન, JavaScript અને TypeScript, CSS અને SCSS, સ્ટેટિક એક્સપોર્ટ અને સર્વરલેસ ડિપ્લોયમેન્ટ વચ્ચે પસંદગી કરી શકો છો.
વિશેષતા
- રાઉટીંગ આપોઆપ થાય છે - તમારે કંઈપણ ગોઠવવાની જરૂર નથી કારણ કે કોઈપણ URL ને ફાઇલસિસ્ટમ સાથે, પેજ ફોલ્ડરમાંની ફાઇલો સાથે મેપ કરવામાં આવે છે (અલબત્ત તમારી પાસે કસ્ટમાઇઝેશન વિકલ્પો છે).
- સિંગલ ફાઇલના ઘટકો - સ્ટાઇલ્ડ-જેએસએક્સનો ઉપયોગ કરીને ઘટકમાં સ્કોપ કરેલ શૈલીઓ ઉમેરવાનું સરળ છે, જે સંપૂર્ણ રીતે સંકલિત અને સમાન ટીમ દ્વારા ઉત્પાદિત છે.
- હોટ કોડને ફરીથી લોડ કરી રહ્યું છે - જ્યારે Next.js ડિસ્કમાં સાચવેલા ફેરફારને શોધે છે, ત્યારે તે પૃષ્ઠને ફરીથી લોડ કરે છે.
- ગતિશીલ ઘટકો - તમે જાવાસ્ક્રિપ્ટ મોડ્યુલો અને પ્રતિક્રિયા ઘટકોને ગતિશીલ રીતે લોડ કરી શકો છો.
- સ્થિર નિકાસ - Next.js તમને આગામી નિકાસ આદેશ સાથે તમારી એપ્લિકેશનમાંથી સંપૂર્ણપણે સ્થિર સાઇટની નિકાસ કરવાની મંજૂરી આપે છે.
- પર્યાવરણ સાથે સુસંગતતા - Next.js JavaScript, નોડ અને રિએક્ટ ઇકોસિસ્ટમ સાથે એકીકૃત રીતે સંકલિત થાય છે.
- વિભાજન કોડ્સ આપોઆપ - ફક્ત લાઇબ્રેરીઓ અને જાવાસ્ક્રિપ્ટનો ઉપયોગ પૃષ્ઠોને રેન્ડર કરવા માટે થાય છે. એપ્લિકેશનના તમામ કોડ ધરાવતી એક જ JavaScript ફાઇલ બનાવવાને બદલે, Next.js એ એપ્લિકેશનને ઘણા સંસાધનોમાં વિભાજિત કરે છે.
Next.js એપ્લિકેશન કેવી રીતે બનાવવી?
સ્થાપન
તમે Next.js પ્રોજેક્ટને ઇન્સ્ટોલ અને બિલ્ડ કરવા માટે નોડ npx આદેશનો ઉપયોગ કરી શકો છો.
આ એક ફોલ્ડર અને Next.js પ્રોજેક્ટ ચલાવવા માટે જરૂરી બધી ફાઇલો, રૂપરેખાંકનો અને અન્ય આઇટમ્સ જનરેટ કરશે.
એકવાર તે જનરેટ થઈ જાય પછી તમે તેને લોન્ચ કરી શકો છો.
પૃષ્ઠો અને રૂટીંગ
Next.js સાથે રૂટ્સ હેન્ડલ કરવા માટે, અમારે રૂટીંગ ફ્રેમવર્કનો ઉપયોગ કરવાની જરૂર નથી. Next.js સાથે રાઉટીંગ સેટઅપ કરવા માટે એક સરસ મજા છે. જ્યારે તમે નવી Next.js એપ બનાવવા માટે create-next-app આદેશનો ઉપયોગ કરો છો, ત્યારે એપ મૂળભૂત રીતે 'pages' નામનું ફોલ્ડર બનાવે છે.
આ 'પૃષ્ઠો' ફોલ્ડર એ છે જ્યાં તમે તમારા રૂટની જાળવણી કરો છો. પરિણામે, સબડિરેક્ટરીમાં દરેક પ્રતિક્રિયા ઘટકોની ફાઇલને અલગ રૂટ તરીકે હેન્ડલ કરવામાં આવશે.
ઉદાહરણ તરીકે, જો ફોલ્ડરમાં તે ફાઇલો છે:
- index.js
- વિશે.js
- aricles.js
આ ફાઇલ ત્રણ રીતે આપમેળે રૂપાંતરિત થશે:
- ઇન્ડેક્સ પેજ લોકલહોસ્ટ/ઇન્ડેક્સ
- વિશે પૃષ્ઠ લોકલહોસ્ટ/વિશે
- બ્લોગ પેજ લોકલહોસ્ટ/લેખ
about.js પૃષ્ઠનું ઉદાહરણ નીચે બતાવેલ છે. તમે જોઈ શકો છો તેમ, પૃષ્ઠ વિશે કંઈપણ પ્રદાન કરવામાં આવ્યું નથી. તે ફક્ત પ્રમાણભૂત પ્રતિક્રિયા કાર્યાત્મક ઘટક છે.
રાઉટ
નેસ્ટેડ રૂટ્સ બનાવવા માટે, તમારે પહેલા સબફોલ્ડર સ્થાપિત કરવું આવશ્યક છે. દાખલા તરીકે: પૃષ્ઠો/લેખ. તે ફોલ્ડરમાં તમારું 'contact.js' પ્રતિક્રિયા ઘટક બનાવો, અને તે લોકલહોસ્ટ/લેખ/સંપર્ક પૃષ્ઠ જનરેટ કરશે.
જો તમે એક ફાઇલ pages/articles.js માં અને બીજી ફાઇલ pages/articles/index.js માં મૂકો છો. બંને લોકલહોસ્ટ/બ્લોગ સમાન પાથને પ્રતિબિંબિત કરે છે. આ સ્થિતિમાં, Next.js માત્ર article.js ફાઇલને રેન્ડર કરશે. ગતિશીલ માર્ગો વિશે શું, જેમાં દરેક બ્લોગ પોસ્ટનો પોતાનો પાથ હોય છે:
- લોકલહોસ્ટ/બ્લોગ/પ્રથમ-લેખ
- લોકલહોસ્ટ/બ્લોગ/-બીજો-લેખ
કૌંસ નોટેશનનો ઉપયોગ કરીને, તમે Next.js માં ડાયનેમિક રૂટ વ્યાખ્યાયિત કરી શકો છો. દાખલા તરીકે: pages/article/[slug].js
લિંક રૂટ્સ
તમે હવે તમારો પહેલો રૂટ પૂર્ણ કરી લીધો છે. હું અનુમાન કરી રહ્યો છું કે તમે પૃષ્ઠોને તે માર્ગો સાથે કેવી રીતે કનેક્ટ કરવા તે પૂછી રહ્યાં છો. આમ કરવા માટે તમારે 'નેક્સ્ટ/લિંક'ની જરૂર પડશે.
અહીં હોમ પેજનું ઉદાહરણ છે જેમાં વિશે પેજની લિંક શામેલ છે:
જો તમે લિંકને સ્ટાઇલ કરવા માંગો છો, તો નીચેના વાક્યરચનાનો ઉપયોગ કરો:
માર્ગો રીડાયરેક્ટ કરો
જો તમારે ચોક્કસ પૃષ્ઠ પર રીડાયરેક્ટ કરવાની ફરજ પાડવાની જરૂર હોય તો શું? દાખલા તરીકે, જ્યારે બટન દબાવવામાં આવે છે? તમે 'router.push' નો ઉપયોગ કરીને આ પરિપૂર્ણ કરી શકો છો:
SEO
વેબ એપ્લિકેશન્સમાંના પૃષ્ઠોને HTML બોડીમાં ડેટા ઉપરાંત મેટા (હેડ) તત્વોની જરૂર હોય છે. આનાથી રિએક્ટ એપ્લિકેશનમાં રિએક્ટ હેલ્મેટ નામની વધારાની જરૂરિયાત ઇન્સ્ટોલ કરવાની જરૂર પડશે.
અમે અમારા વેબપેજ પર સરળતાથી મેટાડેટા ઉમેરવા માટે નેક્સ્ટમાં નેક્સ્ટ/હેડમાંથી હેડ કમ્પોનન્ટનો ઉપયોગ કરી શકીએ છીએ જે શોધ પરિણામો અને એમ્બેડ્સમાં પ્રદર્શિત થશે:
ઘટકો
તમારે વારંવાર ઘટકો અથવા લેઆઉટ ફાઇલ વિકસાવવાની જરૂર પડશે. દાખલા તરીકે, એક ઘટક કે જે navbar રેન્ડર કરે છે. અમે અત્યાર સુધી ફક્ત પેજ ફોલ્ડરનો ઉપયોગ કર્યો છે. જો તમારું ઘટક રૂટ પેજ ન હોય તો શું?
તમે નથી ઇચ્છતા કે વપરાશકર્તા લોકલહોસ્ટ/નવબાર જેવા પૃષ્ઠ પર નેવિગેટ કરે. જો તમે પેજ ફોલ્ડરમાં Navbar.js ઘટક મૂકો છો, તો તે જ થશે. પરિસ્થિતિમાં તમારે શું કરવું જોઈએ?
ફક્ત તમારા બધા 'પૃષ્ઠ નહીં' ઘટકોને એક અલગ ફોલ્ડરમાં સંગ્રહિત કરો. મોટા ભાગના Next.js પ્રોજેક્ટ મોનિકર 'કમ્પોનન્ટ્સ'નો ઉપયોગ કરે છે અને આ ફોલ્ડર તમારા પ્રોજેક્ટના રૂટ ફોલ્ડરમાં જનરેટ થાય છે.
વડા ઘટક
પ્રારંભિક પૃષ્ઠ લોડ સર્વર બાજુ પર Next.js દ્વારા રેન્ડર કરવામાં આવે છે. તે તમારા પૃષ્ઠના HTML ને સંશોધિત કરીને આ કરે છે. હેડર વિભાગ સમાવવામાં આવેલ છે.
Next.js હેડ કમ્પોનન્ટનો ઉપયોગ હેડર સેક્શન ટેગ્સ આપવા માટે થાય છે જેમ કે શીર્ષક અને મેટા. લેઆઉટ ઘટકના આ ઉદાહરણમાં હેડ ઘટકનો ઉપયોગ થાય છે.
બનાવો 404 પેજ મળ્યું નથી
તમારું પોતાનું 404 ભૂલ પૃષ્ઠ બનાવવું શક્ય છે. તમે સંદેશને કસ્ટમાઇઝ કરવા અથવા તમારી પોતાની પેજ ડિઝાઇન ઉમેરવા ઈચ્છી શકો છો. પૃષ્ઠો ફોલ્ડરમાં, 404.js ફાઇલ બનાવો.
જ્યારે 404 ભૂલ થાય છે, ત્યારે Next.js આપમેળે આ પૃષ્ઠ પર રીડાયરેક્ટ કરશે. અહીં વ્યક્તિગત 404 પૃષ્ઠનું ઉદાહરણ છે:
સર્વર-બાજુથી ડેટા આનયન
ક્લાયંટ-સાઇડ પર ડેટા ડાઉનલોડ કરવાને બદલે, Next.js તમને પ્રારંભિક ડેટા વસ્તીનું સંચાલન કરવાની મંજૂરી આપે છે, જેનો અર્થ સર્વરમાંથી પહેલેથી જ ભરાયેલા ડેટા સાથે પૃષ્ઠ મોકલવાનો છે.
તમારી પાસે સર્વર-સાઇડ ડેટા લાવવાના અમલીકરણ માટે બે પસંદગીઓ છે:
- દરેક વિનંતી પર ડેટા મેળવવો જોઈએ.
- સમગ્ર બાંધકામ પ્રક્રિયા દરમિયાન માત્ર એક જ વાર ડેટા મેળવો (સ્થિર સાઇટ)
દરેક વિનંતી પર ડેટા મેળવો
getServerSideProps પદ્ધતિનો ઉપયોગ સર્વર-સાઇડ દરેક વિનંતીને રેન્ડર કરવા માટે થાય છે. આ ફંક્શન તમારી કમ્પોનન્ટ ફાઇલના અંતે સમાવી શકાય છે. જો તે ફંક્શન તમારી કમ્પોનન્ટ ફાઈલમાં હાજર હોય તો Next.js આપમેળે getServerSideProps ઑબ્જેક્ટ સાથે તમારા ઘટક પ્રોપ્સને પોપ્યુલેટ કરશે.
બિલ્ડ સમયે ડેટા મેળવો
getStaticProps પદ્ધતિનો ઉપયોગ બિલ્ડ સમયે સર્વર-સાઇડ રેન્ડર કરવા માટે થાય છે. આ ફંક્શન તમારી કમ્પોનન્ટ ફાઇલના અંતે સમાવી શકાય છે. આ પદ્ધતિ સર્વર કોડ ચલાવે છે અને સર્વરને GET વિનંતી મોકલે છે, પરંતુ જ્યારે અમારો પ્રોજેક્ટ સમાપ્ત થાય ત્યારે જ એક વાર.
તમારે Next.js કેમ શીખવું જોઈએ?
તેનું એક કારણ એ છે કે Next.js રીએક્ટની ટોચ પર બનેલ છે, જે માટે ફ્રન્ટ-એન્ડ ડેવલપમેન્ટ ટૂલકીટ વપરાશકર્તા ઈન્ટરફેસ બનાવવા વેબ એપ્સ ડિઝાઇન કરવા માટે તે મારી પ્રિય પસંદગી છે.
પરંતુ તે પૂરતું નથી જો Next.js એ જે કર્યું તેમાં સારું ન હતું... બરાબર?
તેથી, તે બરાબર શું કરે છે?
તેને સમજવા માટે આપણે પહેલા થોડા ખ્યાલોને વ્યાખ્યાયિત કરવા જોઈએ. Next.js એ લોકપ્રિયતા મેળવી કારણ કે તે ઘણા વેબ ડેવલપર્સને ક્લાયન્ટ-સાઇડ વેબ એપ્સ (બ્રાઉઝરમાં) ની સમસ્યાને હલ કરી હતી. આ સિંગલ-પેજ એપ્લિકેશન્સ (SPAs) ને વધુ સારો અનુભવ હતો કારણ કે તેમને વપરાશકર્તાને પૃષ્ઠને ફરીથી લોડ કરવાની જરૂર નહોતી અને વધુ ક્રિયાપ્રતિક્રિયા માટે મંજૂરી આપી હતી.
જો કે, કારણ કે આના જેવી એપ્લિકેશનમાં મોટાભાગની સામગ્રી ફક્ત ત્યારે જ દેખાય છે જ્યારે તે બ્રાઉઝરમાં કરવામાં આવે છે, વેબ ક્રોલર્સને આવી એપ્લિકેશનની ટેક્સ્ટ સામગ્રીને સમજવામાં મુશ્કેલી પડે છે.
પરિણામે, તેમની લોકપ્રિયતા હોવા છતાં, ઘણા એસપીએ મોટાભાગે Google જેવા મોટા સર્ચ એન્જિન માટે અનામી રહ્યા. Next.js હવે રિએક્ટ ઘટકોના સર્વર-સાઇડ રેન્ડરિંગ (SSR) માટે વધુ મજબૂત બિલ્ટ-ઇન મિકેનિઝમનો સમાવેશ કરે છે.
Next.js વિકાસકર્તાઓને બિલ્ડ પ્રક્રિયા દરમિયાન સર્વર પર JavaScript કોડ બનાવવા અને વપરાશકર્તાને મૂળભૂત, અનુક્રમિત HTML પ્રદાન કરવાની મંજૂરી આપે છે.
ગુણ
- વપરાશકર્તા અનુભવ માટે સરસ
- SEO માટે સરસ
- એક સુપર-ફાસ્ટ સ્ટેટિક વેબસાઇટ બનાવો જે ડાયનેમિકની જેમ વર્તે
- UI અને UX બનાવવામાં સુગમતા.
- વિકાસના ઘણા ફાયદા
- મહાન સમુદાય આધાર
વિપક્ષ
- વેબસાઈટ અથવા એપ્લીકેશનમાં નિર્માણ અથવા વિકાસ માટે ચોક્કસ સમય હોય છે.
- અમુક કાર્યો માટે, Next.js અપૂરતું છે. વિકાસકર્તાઓ Node.js ટૂલ્સનો ઉપયોગ કરીને ડાયનેમિક રૂટ્સ બનાવવા માટે સક્ષમ હોવા જોઈએ.
ઉપસંહાર
જેમ તમે જોઈ શકો છો, Next.js રીએક્ટ એપ ડેવલપમેન્ટને સરળ બનાવે છે અને તમને સૌથી વધુ મહત્વની બાબતો પર ધ્યાન કેન્દ્રિત કરવાની મંજૂરી આપે છે - તમારી એપ લોજિક અને UI. તેમાં સમકાલીન, અગ્ર-સંપન્ન અને API-સંચાલિત એપ્લિકેશનો બનાવવા માટે જરૂરી બધું શામેલ છે.
સ્થિર HTML પૃષ્ઠો બનાવવાની તેની ક્ષમતાને કારણે તે ફક્ત સામગ્રી-પ્રોજેક્ટ્સ, જેમ કે બ્લોગ્સ અને વ્યવસાયિક વેબસાઇટ્સ માટે પણ યોગ્ય છે.
વર્તમાન આવૃત્તિઓ સાથે, Next.js માત્ર વિકાસકર્તા અનુભવના ઉચ્ચ સ્તરને જાળવતું નથી પરંતુ આ ફ્રેમવર્ક માટે ઉજ્જવળ ભવિષ્યની ખાતરી કરીને વિઝ્યુઅલ પર્ફોર્મન્સ અને વપરાશકર્તા અનુભવ વધારવા માટેના સાધનો પણ આપે છે.
એક જવાબ છોડો