Formulario

El componente <Form> extiende el elemento HTML <form> para proporcionar navegación del lado del cliente (client-side navigation) al enviar, y mejora progresiva (progressive enhancement).

Es útil para formularios que actualizan parámetros de búsqueda en la URL, ya que reduce el código repetitivo necesario para lograr lo anterior.

Uso básico:

import Form from 'next/form'

export default function Page() {
  return (
    <Form action="/search">
      {/* Al enviar, el valor del input se añadirá a
          la URL, ej. /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">
      {/* Al enviar, el valor del input se añadirá a
          la URL, ej. /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

Referencia

El comportamiento del componente <Form> depende de si la prop action recibe un string o una function.

• Cuando action es un string, el <Form> se comporta como un formulario HTML nativo que usa un método GET. Los datos del formulario se codifican en la URL como parámetros de búsqueda, y cuando se envía el formulario, navega a la URL especificada. Además, Next.js:
  • Realiza una navegación del lado del cliente (client-side navigation) en lugar de una recarga completa de página al enviar el formulario. Esto mantiene la UI compartida y el estado del lado del cliente.

Props de action (string)

Cuando action es un string, el componente <Form> soporta las siguientes props:

• action: La URL o ruta a la que navegar cuando se envía el formulario.
  • Un string vacío "" navegará a la misma ruta con los parámetros de búsqueda actualizados.
• replace: Reemplaza el estado actual del historial en lugar de añadir uno nuevo a la pila del historial del navegador. Por defecto es false.
• scroll: Controla el comportamiento de desplazamiento durante la navegación. Por defecto es true, lo que significa que se desplazará al inicio de la nueva ruta y mantendrá la posición de desplazamiento para navegación hacia atrás y adelante.

Consideraciones

• onSubmit: Puede usarse para manejar lógica de envío de formularios. Sin embargo, llamar a event.preventDefault() sobrescribirá el comportamiento de <Form> como navegar a la URL especificada.
• method, encType, target: No están soportados ya que sobrescriben el comportamiento de <Form>.
  • Similarmente, formMethod, formEncType y formTarget pueden usarse para sobrescribir las props method, encType y target respectivamente, y su uso hará que se recurra al comportamiento nativo del navegador.
  • Si necesita usar estas props, utilice el elemento HTML <form> en su lugar.
• <input type="file">: Usar este tipo de input cuando action es un string coincidirá con el comportamiento del navegador al enviar el nombre del archivo en lugar del objeto de archivo.