Сообщение об ошибке в NextJS

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

export let names = [];

'use server';

import { names } from './data';

export async function addName(prevState, formData) {
	let name = formData.get('name');
	
	if (!name || !String(name).trim()) {
		return { error: 'Name is required' };
	}
	
	names.push(String(name).trim());
	return { error: '' };
}

Чтобы вывести сообщение на экран, нужен клиентский компонент с хуком useActionState из пакета react. Он связывает форму с действием и хранит последний результат на клиенте:

'use client';

import { useActionState } from 'react';
import { addName } from './actions';

export default function NameForm() {
	let [state, formAction] = useActionState(addName, { error: '' });
	
	return (
		<form action={formAction}>
			<input type="text" name="name" placeholder="Your name" />
			<button type="submit">Save</button>
			{state.error ? <p>{state.error}</p> : null}
		</form>
	);
}

Серверная страница показывает список и подключает форму:

import { names } from './data';
import NameForm from './NameForm';

export default function NamesPage() {
	return (
		<div>
			<ul>
				{names.map(function (name, index) {
					return <li key={index}>{name}</li>;
				})}
			</ul>
			<NameForm />
		</div>
	);
}

Проверьте, что пустой заголовок задачи не сохраняется, а под формой виден английский текст предупреждения.