Form

<Form>コンポーネントは、HTMLの<form>要素を拡張し、 送信時のクライアントサイドナビゲーションとプログレッシブエンハンスメントを提供します。

これは、上記を実現するために必要な定型コードを削減できるため、URLの検索パラメータを更新するフォームに便利です。

基本的な使い方

import Form from 'next/form'
 
export default function Page() {
  return (
    <Form action="/search">
      {/* On submission, the input value will be appended to
          the URL, e.g. /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

リファレンス

<Form>コンポーネントの動作は、actionプロップにstringが渡されたかfunctionが渡されたかによって異なります。

• actionがstringの場合、<Form>はネイティブHTMLフォームのように動作し、GETメソッドを使用します。フォームデータはURLの検索パラメータとしてエンコードされ、フォームが送信されると指定されたURLにナビゲートします。さらに、Next.jsは
  • フォームが送信されたときに、フルページリロードではなく、クライアントサイドナビゲーションを実行します。これにより、共有UIとクライアントサイドの状態が保持されます。

action (文字列) Props

actionが文字列の場合、<Form>コンポーネントは以下のプロップをサポートします。

• action: フォーム送信時にナビゲートするURLまたはパス。
  • 空文字列""は、検索パラメータが更新された同じルートにナビゲートします。
• replace: 新しい履歴ステートをプッシュするのではなく、現在の履歴ステートを置き換えます。ブラウザの履歴。デフォルトはfalseです。
• scroll: ナビゲーション中のスクロール動作を制御します。デフォルトはtrueで、新しいルートの先頭にスクロールし、前後のナビゲーションのスクロール位置を維持します。

注意点

• onSubmit: フォーム送信ロジックを処理するために使用できます。ただし、event.preventDefault()を呼び出すと、指定されたURLへのナビゲーションのような<Form>の動作が上書きされます。
• method, encType, target: これらは<Form>の動作を上書きするためサポートされていません。
  • 同様に、formMethod、formEncType、formTargetはそれぞれmethod、encType、targetプロップを上書きするために使用でき、これらを使用するとネイティブブラウザの動作にフォールバックします。
  • これらのプロップを使用する必要がある場合は、代わりにHTMLの<form>要素を使用してください。
• <input type="file">: actionが文字列の場合にこの入力タイプを使用すると、ファイルオブジェクトではなくファイル名を送信することで、ブラウザの動作と一致します。