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

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

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

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

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

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

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

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

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