Next.js Osnove: Ustvarjanje strani in Routing razlaga osnov

V procesu razvoja spletne aplikacije je upravljanje strani in krmarjenje med njimi ključni vidik. V tej seriji člankov se bomo poglobili v osnove ustvarjanja strani in izvajanja navigacije v Next.js. Ti temeljni koncepti so bistveni za gradnjo prilagodljivih in obvladljivih spletnih aplikacij.

Ustvarjanje in prikaz prve strani

Najprej poglejmo, kako ustvariti in prikazati preprosto stran v Next.js. Strani lahko ustvarite tako, da ustvarite datoteke v pages imeniku vašega projekta. Če želite na primer ustvariti pozdravno stran, lahko ustvarite datoteko z imenom welcome.js znotraj pages imenika.

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

V zgornjem delčku kode smo ustvarili preprosto pozdravno stran. Ko dostopate do /welcome poti v spletnem brskalniku, boste videli sporočilo "Dobrodošli v Next.js !" prikazano.

Osnovno Routing

Next.js ponuja robusten in intuitiven routing sistem, ki olajša navigacijo med stranmi. Routing in Next.js temelji na pages imeniku, pri čemer vsaka datoteka v tem imeniku ustreza določeni poti. Na primer, datoteka, imenovana about.js znotraj pages imenika, bo ustvarila stran, dostopno na /about poti.

Ustvarjanje povezav in navigacije

Za ustvarjanje povezav med stranmi in krmarjenje med njimi lahko uporabimo komponento <Link> iz next/link knjižnice. Spodaj je primer ustvarjanja povezave od pozdravne strani do strani o nas.

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

Ko v zgornjem primeru kliknete povezavo »Več o nas«, boste preusmerjeni na /about stran.

Zaključek

V tem razdelku smo raziskali, kako ustvariti in prikazati preproste strani Next.js in kako implementirati navigacijo med stranmi z uporabo pages imenika in <Link> komponente. To so ključni začetni koraki pri izdelavi Next.js aplikacije. V prihodnjih člankih bomo še naprej raziskovali druge vidike Next.js gradnje dinamičnih in interaktivnih spletnih aplikacij.