Form

<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">Submit</button>
    </Form>
  )
}

import Form from 'next/form'

export default function Search() {
  return (
    <Form action="/search">
      {/* 送信時、入力値がURLに追加されます
          例: /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 (文字列) プロパティ

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 が文字列の場合、この入力タイプを使用すると、ファイルオブジェクトではなくファイル名が送信されるというブラウザの動作に従います。