<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が**文字列**の場合、<Form>は**`GET`**メソッドを使用するネイティブHTMLフォームのように動作します。フォームデータは検索パラメータとしてURLにエンコードされ、フォームが送信されると、指定されたURLに移動します。さらに、Next.jsは
  • フォーム送信時にページ全体をリロードする代わりに、クライアントサイドナビゲーションを実行します。これにより、共有UIとクライアントサイドの状態が保持されます。

action (string) プロパティ

actionが文字列の場合、<Form>コンポーネントは次のプロパティをサポートします。

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

注意点

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