<Form>

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

URLのsearchパラメータを更新するフォームに役立ち、これらを実現するために必要な定型コードを削減します。

基本的な使用方法：

/ui/search.js

TypeScript

import Form from 'next/form'
 
export default function Page() {
  return (
    <Form action="/search">
      {/* 送信時に、入力値がURLに追加されます。
          例: /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

リファレンス

<Form> コンポーネントの動作は、action プロップが文字列か関数かによって異なります。

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

`action`（文字列）Props

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

Prop	例	型	必須
`action`	`action="/search"`	`string`（URLまたは相対パス）	はい
`replace`	`replace={false}`	`boolean`	-
`scroll`	`scroll={true}`	`boolean`	-

action：フォーム送信時にナビゲーションするURL またはパス。
- 空の文字列 "" は、更新されたsearchパラメータで同じルートにナビゲーションします。
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が文字列の場合、ファイルオブジェクトの代わりにファイル名を送信することで、ブラウザの動作に一致します。

<Form>

リファレンス

action（文字列）Props

注意点

`action`（文字列）Props