Серверное действие в NextJS

Давайте заведем страницу со списком имен и кнопкой, которая дополняет этот список на сервере. Данные положим в массив в отдельном файле модуля:

export let names = [
	'Alice',
	'Bob',
];

Серверное действие оформим в файле с директивой 'use server'. Пока функция только принимает вызов и добавляет в массив готовое английское имя:

'use server';

import { names } from './data';

export async function addName() {
	names.push('Guest');
}

На странице выведем список и форму с кнопкой. Атрибут action указывает на импортированное действие - после нажатия NextJS выполнит его на сервере и обновит текущую страницу:

import { names } from './data';
import { addName } from './actions';

export default function NamesPage() {
	return (
		<div>
			<ul>
				{names.map(function (name, index) {
					return <li key={index}>{name}</li>;
				})}
			</ul>
			<form action={addName}>
				<button type="submit">Add name</button>
			</form>
		</div>
	);
}

Сделайте страницу с перечнем городов и кнопкой, которая дописывает на сервере английское название без полей ввода.