NextJS фреймворкінің жұмыс істеу негізгі принципі

Алдыңғы сабақтарда біз NextJS фреймворкін орнаттық және оның негізгі құрылымымен таныстық. Енді негізгі жұмысты бастау уақыты келді.

NextJS-тің негізгі бөлігі маршруттау болып табылады. Маршруттау мынадай жолмен жұмыс істейді: пайдаланушы браузердің мекенжай жолына қандай да бір URL енгізген кезде, NextJS фреймворкі браузерге осы URL-ге сәйкес келетін белгілі бір файлды береді.

NextJS-тегі маршруттау ерекше жолмен ұйымдастырылған. Оның мәні мындада: әрбір сұралған URL src/app ішіндегі белгілі бір қалтаға сәйкес келеді.

Сонымен бірге қалтаның ішінде page.jsx аталатын файл болуы керек. Дәл осы файл браузерге берілетін болады. Сонымен қатар, біз осы файлда JSX тілінде код жазамыз, ал браузерге беттің дайын HTML коды жіберіледі.

Мысал арқылы қарастырайық. Біз /test/ URL үшін белгілі бір мәтін берілуін қалаймыз делік.

Сәйкес қалтаны жасайық: src/app/test. Осы қалтаның ішінде page.jsx файлын жасаймыз сонымен бірге келесі мазмұнмен:

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

Браузерде біздің URL-ді ашыңыз: /test. Сіз біздің JSX файлының ішінде жазған мәтінімізді көресіз.

Мәтінді өзгертіп көріңіз және файлды сақтаңыз. Содан кейін мәтін автоматты түрде браузерде де өзгереді. NextJS даму режимінде осылай жұмыс істейді.

/about мекенжайына жүгінген кезде браузерде сіздің атыңыз бен тегіңізді қамтитын хабарлама шығарылуын жасаңыз.