Серверные компоненты в фреймворке NextJS

Рассмотрим компонент, созданный нами в предыдущем уроке:

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

Как уже упоминалось ранее, по умолчанию в NextJS все компоненты являются серверными. При этом нам доступны все возможности языка JSX, за исключением работы со стейтами и других аналогичных хуков.

Для примера давайте сделаем переменную и выведем ее в верстке:

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

Задание 1

Дан массив продуктов:

jsxlet prods = [
  'prod1',
  'prod2',
  'prod3',
];

С помощью цикла выведите эти продукты в виде списка ul внутри вашего серверного компонента.