フォーム

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

URL 検索パラメータを更新するフォームに役立ちます。上記を実現するために必要なボイラープレートコードを削減できます。

基本的な使用方法：

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

リファレンス

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

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

action（文字列）プロップ

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 が文字列の場合にこの入力タイプを使用すると、ブラウザ動作と一致して、ファイルオブジェクトの代わりにファイル名を送信します。