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