Podstawowa zasada działania frameworku NextJS

W poprzednich lekcjach zainstalowaliśmy framework NextJS i zapoznaliśmy się z jego podstawową strukturą. Nadszedł czas na główną pracę.

Główną częścią NextJS jest routing. Routing działa w ten sposób: gdy użytkownik wpisze w pasku adresu przeglądarki jakikolwiek URL, framework NextJS przekaże do przeglądarki określony plik, odpowiadający temu URL.

Routing w NextJS jest zorganizowany w szczególny sposób. Jego istota polega na tym, że każdemu żądanemu URL odpowiada pewien folder wewnątrz src/app.

Jednocześnie wewnątrz folderu musi znajdować się plik o nazwie page.jsx. To właśnie ten plik zostanie przekazany do przeglądarki. Co więcej, w tym pliku będziemy pisać kod w JSX, a do przeglądarki zostanie wysłany gotowy kod HTML strony.

Spójrzmy na przykład. Załóżmy, że chcemy, aby pod adresem /test/ był zwracany pewien tekst.

Utwórzmy odpowiedni folder: src/app/test. Wewnątrz tego folderu utwórzmy plik page.jsx z następującą zawartością:

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

Otwórz w przeglądarce nasz URL: /test. I zobaczysz tekst, który napisaliśmy wewnątrz pliku JSX.

Spróbuj zmienić tekst i zapisz plik. Po tym tekście automatycznie zmieni się również w przeglądarce. Tak działa NextJS w trybie deweloperskim.

Spraw, aby przy odwołaniu pod adres /about w przeglądarce wyświetlała się wiadomość z twoim imieniem i nazwiskiem.