Form

Компонент <Form> расширяет HTML-элемент <form>, предоставляя клиентскую навигацию при отправке и прогрессивное улучшение.

Он особенно полезен для форм, обновляющих параметры поиска в URL, так как сокращает количество шаблонного кода.

Базовое использование:

import Form from 'next/form'

export default function Page() {
  return (
    <Form action="/search">
      {/* При отправке значение input будет добавлено к
          URL, например /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

import Form from 'next/form'

export default function Search() {
  return (
    <Form action="/search">
      {/* При отправке значение input будет добавлено к
          URL, например /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

Справочник

Поведение компонента <Form> зависит от того, передается ли в проп action строка (string) или функция (function).

• Когда action — это строка, <Form> ведет себя как нативная HTML-форма с методом GET. Данные формы кодируются в URL как параметры поиска, и при отправке формы происходит переход по указанному URL. Дополнительно Next.js:
  • Выполняет клиентскую навигацию вместо полной перезагрузки страницы, сохраняя общий UI и клиентское состояние.

Пропсы action (string)

Когда action — это строка, компонент <Form> поддерживает следующие пропсы:

• action: URL или путь для перехода при отправке формы.
  • Пустая строка "" перейдет на тот же маршрут с обновленными параметрами поиска.
• replace: Заменяет текущее состояние истории вместо добавления нового в стек истории браузера. По умолчанию false.
• scroll: Управляет поведением прокрутки при навигации. По умолчанию true — прокручивает к верху нового маршрута и сохраняет позицию прокрутки при навигации назад/вперед.

Ограничения

• onSubmit: Может использоваться для обработки логики отправки формы. Однако вызов event.preventDefault() переопределит поведение <Form>, например переход по указанному URL.
• method, encType, target: Не поддерживаются, так как переопределяют поведение <Form>.
  • Аналогично, formMethod, formEncType и formTarget могут использоваться для переопределения соответствующих пропсов, но их использование приведет к нативному поведению браузера.
  • Если эти пропсы необходимы, используйте HTML-элемент <form>.
• <input type="file">: Использование этого типа input при строковом action приведет к поведению браузера по умолчанию — отправке имени файла вместо объекта файла.