Next.js, форма это не только submit

Next.js, форма это не только submit

Одна из частых ошибок в проекте на Next.js выглядит просто. Форму собирают как input, кнопку и submit, а всё остальное добавляют потом по мере необходимости. Сначала это кажется быстрым решением, но дальше почти всегда начинается расползание логики. Где-то ошибка поля, где-то общая строка сверху, где-то можно нажать submit несколько раз подряд, где-то сервер возвращает правило, которого не было на client.

Рабочий подход здесь другой. Сразу считать форму контрактом. У неё должны быть понятные состояния pending, disable, success, fieldErrors и formError. Тогда отправка данных становится не единственным событием формы, а частью предсказуемого цикла.

В этой схеме связка safeParse и flatten особенно полезна. safeParse не выбрасывает исключение на невалидном вводе, а возвращает результат, с которым можно работать дальше. flatten помогает отдать ошибки в удобной форме для интерфейса. За счёт этого client и server легче держать на одинаковых правилах, а форма перестаёт жить набором локальных компромиссов.

Проект: Workbench