Next.js Misingi: Kuunda Kurasa na Msingi Routing Umefafanuliwa

Katika mchakato wa ukuzaji wa programu ya wavuti, kudhibiti kurasa na kuvinjari kati yao ni kipengele muhimu. Katika mfululizo wa makala haya, tutachunguza misingi ya kuunda kurasa na kutekeleza urambazaji katika Next.js. Dhana hizi za msingi ni muhimu kwa ajili ya kujenga programu za wavuti zinazonyumbulika na zinazoweza kudhibitiwa.

Kuunda na Kuonyesha Ukurasa wa Kwanza

Kwanza, hebu tuelewe jinsi ya kuunda na kuonyesha ukurasa rahisi katika Next.js. Unaweza kuunda kurasa kwa kuunda faili ndani ya pages saraka ya mradi wako. Kwa mfano, kuunda ukurasa wa kukaribisha, unaweza kuunda faili iliyopewa jina welcome.js ndani ya pages saraka.

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

Katika kijisehemu cha msimbo hapo juu, tumeunda ukurasa rahisi wa kukaribisha. Unapofikia /welcome njia katika kivinjari chako cha wavuti, utaona ujumbe "Karibu kwa Next.js !" kuonyeshwa.

Msingi Routing

Next.js inatoa mfumo thabiti na angavu routing ambao hurahisisha usogezaji kati ya kurasa. Routing in Next.js inategemea pages saraka, na kila faili kwenye saraka hii inalingana na njia maalum. Kwa mfano, faili iliyopewa jina about.js ndani ya pages saraka itaunda ukurasa unaopatikana kwenye /about njia.

Kuunda Viungo na Urambazaji

Ili kuunda viungo kati ya kurasa na kuzunguka kati yao, tunaweza kutumia <Link> sehemu kutoka kwa next/link maktaba. Chini ni mfano wa kuunda kiungo kutoka kwa ukurasa wa kukaribisha hadi ukurasa wa kuhusu sisi.

// 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;  

Katika mfano ulio hapo juu, unapobofya kiungo cha "Pata maelezo zaidi kutuhusu", utaelekezwa kwenye ukurasa /about.

Hitimisho

Katika sehemu hii, tumechunguza jinsi ya kuunda na kuonyesha kurasa rahisi ndani Next.js na jinsi ya kutekeleza urambazaji kati ya kurasa kwa kutumia pages saraka na <Link> sehemu. Hizi ni hatua muhimu za awali katika kuunda Next.js programu. Katika makala yajayo, tutaendelea kuchunguza vipengele vingine vya Next.js kuunda programu wasilianifu za wavuti.