Next.js Bazat: Krijimi i faqeve dhe Routing Shpjegimi bazë

Në procesin e zhvillimit të aplikacioneve në internet, menaxhimi i faqeve dhe lundrimi ndërmjet tyre është një aspekt thelbësor. Në këtë seri artikujsh, ne do të shqyrtojmë bazat e krijimit të faqeve dhe zbatimin e navigimit në Next.js. Këto koncepte themelore janë thelbësore për ndërtimin e aplikacioneve të uebit fleksibël dhe të menaxhueshëm.

Krijimi dhe shfaqja e faqes së parë

Së pari, le të kuptojmë se si të krijojmë dhe shfaqim një faqe të thjeshtë në Next.js. Ju mund të krijoni faqe duke krijuar skedarë brenda pages drejtorisë së projektit tuaj. Për shembull, për të krijuar një faqe mirëseardhjeje, mund të krijoni një skedar me emrin welcome.js brenda pages drejtorisë.

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

Në fragmentin e kodit të mësipërm, ne kemi krijuar një faqe të thjeshtë mirëseardhjeje. Kur të hyni në /welcome shtegun në shfletuesin tuaj të internetit, do të shihni mesazhin "Mirë se erdhe në Next.js !" shfaqur.

bazë Routing

Next.js ofron një routing sistem të fortë dhe intuitiv që e bën të lehtë navigimin ndërmjet faqeve. Routing in Next.js bazohet në pages direktorium, ku çdo skedar në këtë direktori korrespondon me një shteg specifik. Për shembull, një skedar me emrin about.js brenda pages drejtorisë do të krijojë një faqe të aksesueshme në /about shteg.

Krijimi i lidhjeve dhe lundrimit

Për të krijuar lidhje ndërmjet faqeve dhe për të lundruar ndërmjet tyre, ne mund të përdorim <Link> komponentin nga next/link biblioteka. Më poshtë është një shembull i krijimit të një lidhjeje nga faqja e mirëseardhjes në faqen rreth nesh.

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

Në shembullin e mësipërm, kur klikoni lidhjen "Mëso më shumë rreth nesh", do të ridrejtohesh në /about faqe.

konkluzioni

Në këtë seksion, ne kemi eksploruar se si të krijojmë dhe shfaqim faqe të thjeshta Next.js dhe si të zbatojmë navigimin ndërmjet faqeve duke përdorur pages drejtorinë dhe <Link> komponentin. Këta janë hapa fillestarë thelbësorë në ndërtimin e një Next.js aplikacioni. Në artikujt e ardhshëm, ne do të vazhdojmë të eksplorojmë aspekte të tjera të Next.js krijimit të aplikacioneve dinamike dhe interaktive në internet.