Основной принцип работы фреймворка 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 в режиме разработки.