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