Next.js Grunderna: Skapa sidor och grundläggande Routing förklaras

I processen för webbapplikationsutveckling är hantering av sidor och navigering mellan dem en avgörande aspekt. I den här artikelserien kommer vi att fördjupa oss i grunderna för att skapa sidor och implementera navigering i Next.js. Dessa grundläggande koncept är viktiga för att bygga flexibla och hanterbara webbapplikationer.

Skapa och visa den första sidan

Låt oss först förstå hur man skapar och visar en enkel sida i Next.js. Du kan skapa sidor genom att skapa filer i pages katalogen för ditt projekt. För att till exempel skapa en välkomstsida kan du skapa en fil med namnet welcome.js i pages katalogen.

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

I kodavsnittet ovan har vi skapat en enkel välkomstsida. När du kommer åt sökvägen /welcome i din webbläsare ser du meddelandet "Välkommen till ! Next.js " visas.

Grundläggande Routing

Next.js erbjuder ett robust och intuitivt routing system som gör det enkelt att navigera mellan sidor. Routing in Next.js baseras på pages katalogen, där varje fil i denna katalog motsvarar en specifik sökväg. Till exempel kommer en fil med namn about.js i pages katalogen att skapa en sida som är tillgänglig på /about sökvägen.

Skapa länkar och navigering

För att skapa länkar mellan sidor och navigera mellan dem kan vi använda <Link> komponenten från next/link biblioteket. Nedan är ett exempel på hur du skapar en länk från välkomstsidan till sidan 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 exemplet ovan, när du klickar på länken "Läs mer om oss" omdirigeras du till sidan /about.

Slutsats

I det här avsnittet har vi utforskat hur man skapar och visar enkla sidor i Next.js och hur man implementerar navigering mellan sidor med hjälp av pages katalogen och <Link> komponenten. Dessa är avgörande inledande steg för att bygga en Next.js applikation. I de kommande artiklarna kommer vi att fortsätta att utforska andra aspekter av Next.js att bygga dynamiska och interaktiva webbapplikationer.