Поля формы в NextJS

Давайте расширим отправку: посетитель вводит имя в инпут, а действие читает его из объекта FormData. Массив имен снова храним в модуле:

export let names = [];

В файле действия первым аргументом приходит formData. Метод get достает строку по имени поля и кладет ее в массив:

'use server';

import { names } from './data';

export async function addName(formData) {
	let name = formData.get('name');
	names.push(name);
}

В разметке формы задаем инпут с атрибутом name и кнопку отправки. Имя из поля попадет в список после обновления страницы:

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}>
				<input type="text" name="name" placeholder="Your name" />
				<button type="submit">Save</button>
			</form>
		</div>
	);
}

Добавьте форму с текстовым полем для заголовка заметки и выведите сохраненные заголовки списком.