Form

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

URLの検索パラメーターを更新するフォームで、上記の目的を達成するために必要なボイラープレートコードを削減できるため、非常に便利です。

基本的な使用法

/ui/search.js

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) Props

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

プロパティ	例	型	必須
`action`	`action="/search"`	`string` (URLまたは相対パス)	はい
`replace`	`replace={false}`	`boolean`	-
`scroll`	`scroll={true}`	`boolean`	-

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

Form

リファレンス

action (string) Props

注意点

`action` (string) Props