Next.js Osnove: Izrada stranica i Routing objašnjenje osnova

U procesu razvoja web aplikacija, upravljanje stranicama i navigacija između njih je ključni aspekt. U ovoj seriji članaka zadubit ćemo se u osnove stvaranja stranica i implementacije navigacije u Next.js. Ovi temeljni koncepti ključni su za izgradnju fleksibilnih i upravljivih web aplikacija.

Stvaranje i prikazivanje prve stranice

Prvo, shvatimo kako stvoriti i prikazati jednostavnu stranicu u Next.js. Stranice možete stvarati stvaranjem datoteka unutar pages direktorija vašeg projekta. Na primjer, da biste stvorili stranicu dobrodošlice, možete stvoriti datoteku s nazivom welcome.js unutar pages direktorija.

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

U gornjem isječku koda stvorili smo jednostavnu stranicu dobrodošlice. Kada pristupite /welcome putu u svom web pregledniku, vidjet ćete poruku "Dobrodošli u Next.js !" prikazano.

Osnovni, temeljni Routing

Next.js nudi robustan i intuitivan routing sustav koji olakšava navigaciju između stranica. Routing in Next.js temelji se na pages direktoriju, pri čemu svaka datoteka u ovom direktoriju odgovara određenom putu. Na primjer, datoteka imenovana about.js unutar pages direktorija će stvoriti stranicu dostupnu na /about stazi.

Stvaranje poveznica i navigacija

Za stvaranje poveznica između stranica i kretanje između njih možemo koristiti komponentu <Link> iz next/link knjižnice. Ispod je primjer stvaranja veze sa stranice dobrodošlice na stranicu o nama.

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

U gornjem primjeru, kada kliknete vezu "Saznajte više o nama", bit ćete preusmjereni na /about stranicu.

Zaključak

U ovom smo odjeljku istražili kako stvoriti i prikazati jednostavne stranice Next.js i kako implementirati navigaciju između stranica pomoću pages imenika i <Link> komponente. Ovo su ključni početni koraci u izradi Next.js aplikacije. U nadolazećim člancima nastavit ćemo istraživati ​​druge aspekte Next.js izgradnje dinamičnih i interaktivnih web aplikacija.