Grunnleggende prinsipp for NextJS-rammeverket
I tidligere leksjoner installerte vi NextJS-rammeverket og ble kjent med dets grunnleggende struktur. Det er på tide å komme i gang med hovedarbeidet.
Hoveddelen av NextJS er ruting. Ruting fungerer slik: når en bruker skriver inn en URL i nettleserens adresselinje, vil NextJS-rammeverket levere til nettleseren en spesifikk fil som tilsvarer denne URL-en.
Ruting i NextJS er organisert på en spesiell måte.
Essensen er at hver
forespurt URL tilsvarer en
mappe inne i src/app.
Samtidig må det inne i mappen være
en fil med navnet page.jsx.
Det er nettopp denne filen som vil bli levert
til nettleseren. Dessuten skal vi i denne filen
skrive kode i JSX, og til nettleseren
vil ferdig HTML-kode for siden bli sendt.
La oss se på et eksempel.
Anta at vi ønsker at URL-en /test/
skal returnere en viss tekst.
La oss opprette den tilsvarende mappen: src/app/test.
Inne i denne mappen lager vi en fil page.jsx
med følgende innhold:
export default function Test() {
return <h1>hello, user!</h1>;
}
Åpne URL-en vår i nettleseren: /test. Og du vil se teksten som vi skrev inni JSX-filen.
Prøv å endre teksten og lagre filen. Etter dette vil teksten automatisk endres også i nettleseren. Slik fungerer NextJS i utviklingsmodus.
Gjør slik at ved forespørsel til adressen
/about vises i nettleseren
en melding med ditt fornavn og
etternavn.
