NextJS-ramverkets grundläggande funktionsprincip

I tidigare lektioner installerade vi NextJS-ramverket och bekantade oss med dess grundläggande struktur. Det är dags att börja med huvudarbetet.

Huvuddelen av NextJS är routing. Routing fungerar så här: när en användare skriver in en URL i webbläsarens adressfält, kommer NextJS-ramverket att leverera en specifik fil till webbläsaren som motsvarar den URL:en.

Routing i NextJS är uppbyggt på ett speciellt sätt. Kärnan är att varje efterfrågad URL motsvarar en viss mapp inom src/app.

Dessutom måste det inne i mappen finnas en fil med namnet page.jsx. Det är just den här filen som kommer att levereras till webbläsaren. Och i den här filen kommer vi att skriva kod i JSX, och till webbläsaren kommer färdig HTML-kod för sidan att skickas.

Låt oss titta på ett exempel. Låt oss säga att vi vill att URL:en /test/ ska returnera en viss text.

Låt oss skapa motsvarande mapp: src/app/test. Inuti den här mappen skapar vi en fil page.jsx med följande innehåll:

src/app/test/page.jsxexport default function Test() {
  return <h1>hello, user!</h1>;
}

Öppna vår URL i webbläsaren: /test. Och du kommer att se texten som vi skrev inuti JSX-filen.

Försök att ändra texten och spara filen. Efter det kommer texten automatiskt att ändras även i webbläsaren. Så här fungerar NextJS i utvecklingsläge.