Next.js મૂળભૂત બાબતો: પૃષ્ઠો બનાવવું અને મૂળભૂત Routing સમજાવ્યું

વેબ એપ્લિકેશન ડેવલપમેન્ટની પ્રક્રિયામાં, પૃષ્ઠોનું સંચાલન કરવું અને તેમની વચ્ચે નેવિગેટ કરવું એ એક નિર્ણાયક પાસું છે. આ લેખ શ્રેણીમાં, અમે પૃષ્ઠો બનાવવા અને માં નેવિગેશનને અમલમાં મૂકવાની મૂળભૂત બાબતોનો અભ્યાસ કરીશું Next.js. લવચીક અને વ્યવસ્થિત વેબ એપ્લિકેશન બનાવવા માટે આ પાયાના ખ્યાલો આવશ્યક છે.

પ્રથમ પૃષ્ઠ બનાવવું અને પ્રદર્શિત કરવું

સૌ પ્રથમ, ચાલો સમજીએ કે કેવી રીતે સાદું પૃષ્ઠ બનાવવું અને પ્રદર્શિત કરવું Next.js. pages તમે તમારા પ્રોજેક્ટની ડિરેક્ટરીમાં ફાઇલો બનાવીને પૃષ્ઠો બનાવી શકો છો. welcome.js દાખલા તરીકે, સ્વાગત પૃષ્ઠ બનાવવા માટે, તમે ડિરેક્ટરીમાં નામવાળી ફાઇલ બનાવી શકો છો pages.

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

ઉપરોક્ત કોડ સ્નિપેટમાં, અમે એક સરળ સ્વાગત પૃષ્ઠ બનાવ્યું છે. જ્યારે તમે તમારા વેબ બ્રાઉઝરમાં પાથને ઍક્સેસ કરશો, ત્યારે તમને "સ્વાગત છે !" /welcome સંદેશ દેખાશે. Next.js પ્રદર્શિત

પાયાની Routing

Next.js એક મજબૂત અને સાહજિક routing સિસ્ટમ પ્રદાન કરે છે જે પૃષ્ઠો વચ્ચે નેવિગેટ કરવાનું સરળ બનાવે છે. Routing in એ ડિરેક્ટરી Next.js પર આધારિત છે pages, આ ડિરેક્ટરીમાંની દરેક ફાઇલ ચોક્કસ પાથને અનુરૂપ છે. about.js ઉદાહરણ તરીકે, ડિરેક્ટરીમાં નામવાળી ફાઇલ પાથ pages પર સુલભ પૃષ્ઠ બનાવશે /about.

લિંક્સ અને નેવિગેશન બનાવવું

પૃષ્ઠો વચ્ચે લિંક્સ બનાવવા અને તેમની વચ્ચે નેવિગેટ કરવા માટે, અમે લાઇબ્રેરીમાંથી <Link> ઘટકનો ઉપયોગ કરી શકીએ છીએ next/link. નીચે સ્વાગત પૃષ્ઠથી અમારા વિશેના પૃષ્ઠની લિંક બનાવવાનું ઉદાહરણ છે.

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

ઉપરના ઉદાહરણમાં, જ્યારે તમે "અમારા વિશે વધુ જાણો" લિંક પર ક્લિક કરો છો, ત્યારે તમને પૃષ્ઠ પર રીડાયરેક્ટ કરવામાં આવશે /about.

નિષ્કર્ષ

આ વિભાગમાં, અમે ડાયરેક્ટરી અને ઘટકનો Next.js ઉપયોગ કરીને પૃષ્ઠો વચ્ચે નેવિગેશન કેવી રીતે અમલમાં મૂકવું અને સરળ પૃષ્ઠો કેવી રીતે બનાવવું અને પ્રદર્શિત કરવું તે શોધ્યું છે. એપ્લિકેશન બનાવવા માટે આ નિર્ણાયક પ્રારંભિક પગલાં છે. આગામી લેખોમાં, અમે ગતિશીલ અને ઇન્ટરેક્ટિવ વેબ એપ્લિકેશન્સ બનાવવાના અન્ય પાસાઓનું અન્વેષણ કરવાનું ચાલુ રાખીશું. pages <Link> Next.js Next.js