Асноўны прынцып работы фрэймворка NextJS

У папярэдніх уроках мы ўсталявалі фрэймворк NextJS і пазнаёміліся з яго базавай структурай. Прыйшоў час заняцца асноўнай работай.

Асноўнай часткай NextJS з'яўляецца рутынг. Рутынг працуе так: калі карыстальнік убівае ў адрасны радок браўзэра які-небудзь URL, фрэймворк NextJS будзе аддаваць у браўзэр пэўны файл, які адпавядае гэтаму URL.

Рутынг у NextJS ўладкованы асобым чынам. Яго суць заключаецца ў тым, што кожнаму запытанаму URL адпавядае неякая папка ўнутры src/app.

Пры гэтым унутры папкі павінен быць файл з назвай page.jsx. Менавіта гэты файл і будзе аддавацца ў браўзэр. Прычым у гэтым файле мы будзем пісаць код на JSX, а ў браўзэр будзе адпраўляцца гатовы HTML код старонкі.

Давайце паглядзім на прыкладзе. Хай мы хочам, каб па URL /test/ аддаваўся некаторы тэкст.

Стварым адпаведную папку: src/app/test. Унутры гэтай папкі зробім файл page.jsx з наступным змесцівам:

src/app/test/page.jsxexport default function Test() {
  return <h1>hello, user!</h1>;
}

Адкрыйце ў браўзэры наш URL: /test. І вы ўбачыце тэкст, напісаны намі ўнутры JSX файла.

Паспрабуйце памяняйце тэкст і захавайце файл. Пасля гэтага тэкст аўтаматычна памяняецца і ў браўзэры. Так працуе NextJS у рэжыме распрацоўкі.