Principiul de bază al funcționării framework-ului NextJS

În lecțiile anterioare am instalat framework-ul NextJS și ne-am familiarizat cu structura sa de bază. A sosit timpul să trecem la munca principală.

Partea principală a NextJS este rutarea. Rutarea funcționează astfel: când utilizatorul introduce în bara de adresă a browserului un anumit URL, framework-ul NextJS va furniza browserului un anumit fișier, corespunzător acelui URL.

Rutarea în NextJS este organizată într-un mod special. Esența sa constă în faptul că fiecărui URL solicitat îi corespunde o anumită director în interiorul src/app.

În același timp, în interiorul directorului trebuie să fie un fișier cu numele page.jsx. Tocmai acest fișier va fi furnizat către browser. Mai mult, în acest fișier noi vom scrie cod în JSX, iar în browser va fi trimis codul HTML gata al paginii.

Să ne uităm la un exemplu. Să presupunem că vrem ca la URL /test/ să fie furnizat un anumit text.

Să creăm directorul corespunzător: src/app/test. În interiorul acestui director să facem fișierul page.jsx cu următorul conținut:

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

Deschideți în browser URL-ul nostru: /test. Și veți vedea textul scris de noi în interiorul fișierului JSX.

Încercați să schimbați textul și salvați fișierul. După aceasta, textul se va schimba automat și în browser. Așa funcționează NextJS în modul de dezvoltare.

Faceți astfel încât la accesarea adresei /about în browser să fie afișat un mesaj cu numele și prenumele dvs.