Next.js Grunnleggende: Opprette sider og grunnleggende Routing forklart

I prosessen med utvikling av nettapplikasjoner er administrasjon av sider og navigering mellom dem et avgjørende aspekt. I denne artikkelserien vil vi fordype oss i det grunnleggende om å lage sider og implementere navigasjon i Next.js. Disse grunnleggende konseptene er avgjørende for å bygge fleksible og håndterbare webapplikasjoner.

Opprette og vise den første siden

La oss først forstå hvordan du oppretter og viser en enkel side i Next.js. Du kan opprette sider ved å lage filer i pages katalogen til prosjektet ditt. For å opprette en velkomstside, kan du for eksempel opprette en fil med navn welcome.js i pages katalogen.

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

I kodebiten ovenfor har vi laget en enkel velkomstside. Når du åpner /welcome banen i nettleseren din, vil du se meldingen "Velkommen til Next.js !" vises.

Grunnleggende Routing

Next.js tilbyr et robust og intuitivt routing system som gjør det enkelt å navigere mellom sider. Routing in Next.js er basert på pages katalogen, med hver fil i denne katalogen tilsvarer en bestemt bane. For eksempel vil en fil med navn about.js i pages katalogen opprette en side som er tilgjengelig på /about banen.

Opprette lenker og navigering

For å lage lenker mellom sider og navigere mellom dem, kan vi bruke <Link> komponenten fra next/link biblioteket. Nedenfor er et eksempel på hvordan du oppretter en lenke fra velkomstsiden til siden om oss.

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

I eksemplet ovenfor, når du klikker på "Les mer om oss"-koblingen, blir du omdirigert til siden /about.

Konklusjon

I denne delen har vi utforsket hvordan du oppretter og viser enkle sider i Next.js og hvordan du implementerer navigering mellom sider ved hjelp av pages katalogen og <Link> komponenten. Dette er avgjørende innledende trinn i å bygge en Next.js applikasjon. I de kommende artiklene vil vi fortsette å utforske andre aspekter ved Next.js å bygge dynamiske og interaktive nettapplikasjoner.