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