close

Next.js Grundlæggende: Oprettelse af sider og Grundlæggende Routing forklaret

I processen med udvikling af webapplikationer er administration af sider og navigation mellem dem et afgørende aspekt. I denne artikelserie vil vi dykke ned i det grundlæggende i at oprette sider og implementere navigation i Next.js. Disse grundlæggende koncepter er afgørende for at bygge fleksible og håndterbare webapplikationer.

Oprettelse og visning af den første side

Lad os først forstå, hvordan man opretter og viser en simpel side i Next.js. Du kan oprette sider ved at oprette filer i pages biblioteket til dit projekt. For at oprette en velkomstside kan du for eksempel oprette en fil med navn welcome.js i pages mappen.

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

I ovenstående kodestykke har vi lavet en simpel velkomstside. Når du åbner /welcome stien i din webbrowser, vil du se meddelelsen "Velkommen til Next.js !" vises.

Grundlæggende Routing

Next.js tilbyder et robust og intuitivt routing system, der gør det nemt at navigere mellem sider. Routing in Next.js er baseret på pages mappen, hvor hver fil i denne mappe svarer til en bestemt sti. For eksempel vil en fil navngivet about.js i pages mappen oprette en side, der er tilgængelig på /about stien.

Oprettelse af links og navigation

For at oprette links mellem sider og navigere mellem dem, kan vi bruge komponenten <Link> fra next/link biblioteket. Nedenfor er et eksempel på oprettelse af et link fra velkomstsiden til siden om os.

// 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å linket "Læs mere om os", bliver du omdirigeret til siden /about.

Konklusion

I dette afsnit har vi undersøgt, hvordan man opretter og viser simple sider i, Next.js og hvordan man implementerer navigation mellem sider ved hjælp af pages biblioteket og <Link> komponenten. Disse er afgørende indledende trin i opbygningen af ​​en Next.js applikation. I de kommende artikler vil vi fortsætte med at udforske andre aspekter af Next.js at bygge dynamiske og interaktive webapplikationer.