A NextJS keretrendszer alapvető működési elve

Az előző leckékben telepítettük a NextJS keretrendszert és megismerkedtünk annak alapszerkezetével. Itt az ideje, hogy a fő munkához fogjunk.

A NextJS legfontosabb része a útválasztás. Az útválasztás a következőképpen működik: amikor a felhasználó beír a böngésző címsorába egy URL-t, a NextJS keretrendszer egy adott fájlt fog visszaadni a böngészőnek, ami ehhez az URL-hez tartozik.

Az útválasztás a NextJS-ben speciális módon van megépítve. Ennek a lényege, hogy minden lekérdezett URL-hez tartozik egy mappa a src/app könyvtáron belül.

Ezen belül a mappában kell lennie egy page.jsx nevű fájlnak. Pontosan ezt a fájlt fogja visszaadni a böngészőnek. Ráadásul ebben a fájlban JSX kódot írunk, és a böngészőbe a kész HTML oldalkód kerül elküldésre.

Nézzük egy példán. Tegyük fel, hogy azt szeretnénk, hogy a /test/ URL-en egy bizonyos szöveg jelenjen meg.

Hozzuk létre a megfelelő mappát: src/app/test. Ezen a mappán belül készítsük el a page.jsx fájlt a következő tartalommal:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Nyissa meg a böngészőben az URL-t: /test. És látni fogja a szöveget, amit a JSX fájlban írtunk.

Próbálja meg megváltoztatni a szöveget és mentse el a fájlt. Ezután a szöveg automatikusan megváltozik a böngészőben is. Így működik a NextJS fejlesztői módban.

Állítsa be, hogy amikor a /about címre érkezik kérés, a böngészőben megjelenjen egy üzenet a kereszt- és vezetéknevéről.