Základný princíp fungovania frameworku NextJS

V predchádzajúcich lekciách sme nainštalovali framework NextJS a zoznámili sme sa s jeho základnou štruktúrou. Prišiel čas venovať sa hlavnej práci.

Hlavnou časťou NextJS je smerovanie (routing). Smerovanie funguje tak, že keď používateľ zadá do adresného riadku prehliadača nejakú URL, framework NextJS vráti do prehliadača určitý súbor, ktorý zodpovedá tejto URL.

Smerovanie v NextJS je zariadené špeciálnym spôsobom. Jeho podstatou je, že každej požadovanej URL zodpovedá nejaký priečinok v src/app.

Zároveň musí inside priečinka existovať súbor s názvom page.jsx. Práve tento súbor bude vrátený do prehliadača. Navyše, v tomto súbore budeme písať kód v JSX, a do prehliadača bude odoslaný hotový HTML kód stránky.

Pozrime sa na príklad. Povedzme, že chceme, aby na URL /test/ bol vrátený nejaký text.

Vytvorme zodpovedajúci priečinok: src/app/test. Inside tohto priečinka vytvorme súbor page.jsx s nasledujúcim obsahom:

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

Otvorte v prehliadači našu URL: /test. A uvidíte text, ktorý sme napísali inside JSX súboru.

Skúste text zmeniť a súbor uložte. Potom sa text automaticky zmení aj v prehliadači. Takto funguje NextJS v režime vývoja.

Zaistite, aby pri prístipe na adresu /about bol v prehliadači zobrazený správa s vaším menom a priezviskom.