Základní princip fungování frameworku NextJS

V předchozích lekcích jsme nainstalovali framework NextJS a seznámili jsme se s jeho základní strukturou. Je čas pustit se do hlavní práce.

Hlavní částí NextJS je routování. Routování funguje takto: když uživatel zadá do adresního řádku prohlížeče nějakou URL, framework NextJS vrátí prohlížeči určitý soubor, odpovídající této URL.

Routování v NextJS je uspořádáno zvláštním způsobem. Podstata spočívá v tom, že každé požadované URL odpovídá určitá složka uvnitř src/app.

Přitom uvnitř složky musí být soubor s názvem page.jsx. Právě tento soubor bude vrácen prohlížeči. A v tomto souboru budeme psát kód v JSX a do prohlížeče bude odeslán hotový HTML kód stránky.

Podívejme se na příklad. Předpokládejme, že chceme, aby na URL /test/ byl vrácen určitý text.

Vytvořme odpovídající složku: src/app/test. Uvnitř této složky vytvoříme soubor page.jsx s následujícím obsahem:

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

Otevřete v prohlížeči naši URL: /test. A uvidíte text, který jsme napsali uvnitř JSX souboru.

Zkuste text změnit a soubor uložte. Poté se text automaticky změní i v prohlížeči. Takto funguje NextJS v režimu vývoje.

Zařiďte, aby při přístupu na adresu /about byl v prohlížeči zobrazen text s vaším jménem a příjmením.