Next.js Basics: Ħolqien ta 'Paġni u Bażiku Routing Spjegat

Fil-proċess tal-iżvilupp tal-applikazzjoni tal-web, il-ġestjoni tal-paġni u n-navigazzjoni bejniethom hija aspett kruċjali. F'din is-serje ta 'artikoli, aħna se nidħol fil-prinċipji fundamentali tal-ħolqien ta' paġni u l-implimentazzjoni tan-navigazzjoni f' Next.js. Dawn il-kunċetti fundamentali huma essenzjali għall-bini ta' applikazzjonijiet tal-web flessibbli u maniġġabbli.

Ħolqien u Wiri tal-Ewwel Paġna

L-ewwelnett, ejja nifhmu kif toħloq u turi paġna sempliċi f' Next.js. Tista' toħloq paġni billi toħloq fajls fid- pages direttorju tal-proġett tiegħek. Pereżempju, biex toħloq paġna ta' merħba, tista' toħloq fajl imsemmi welcome.js fid- pages direttorju.

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

Fis-snippet tal-kodiċi t'hawn fuq, ħloqna paġna ta' merħba sempliċi. Meta taċċessa l- /welcome mogħdija fil-web browser tiegħek, tara l-messaġġ "Merħba għal Next.js !" murija.

Bażiku Routing

Next.js joffri sistema robusta u intuwittiva routing li tagħmel in-navigazzjoni bejn il-paġni faċli. Routing in Next.js hija bbażata fuq id- pages direttorju, b'kull fajl f'dan id-direttorju jikkorrispondi għal mogħdija speċifika. Pereżempju, fajl imsemmi about.js fid- pages direttorju joħloq paġna aċċessibbli fil- /about mogħdija.

Ħolqien ta' Links u Navigazzjoni

Biex noħolqu links bejn il-paġni u nnavigaw bejniethom, nistgħu nużaw il- <Link> komponent mil- next/link librerija. Hawn taħt hawn eżempju tal-ħolqien ta' link mill-paġna ta' merħba għall-paġna dwarna.

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

Fl-eżempju t'hawn fuq, meta tikklikkja fuq il-link "Tgħallem aktar dwarna", tkun ridirett lejn il- /about paġna.

Konklużjoni

F'din it-taqsima, esplorajna kif toħloq u turi paġni sempliċi fi Next.js u kif timplimenta n-navigazzjoni bejn il-paġni billi tuża d- pages direttorju u l- <Link> komponent. Dawn huma passi inizjali kruċjali fil-bini ta ' Next.js applikazzjoni. Fl-artikoli li ġejjin, aħna ser inkomplu nesploraw aspetti oħra Next.js biex nibnu applikazzjonijiet tal-web dinamiċi u interattivi.