Nextjs React Forms

App Router and Server actions.

robinwieruch on forms

Comparison

Next Form Code Example

Controlled vs Uncontrolled

defaultValue vs. value / Controlled vs. Uncontrolled

If you're using state to manage the value of an input, you'd use the value attribute to make it a controlled component. This means React would manage the input's state.

However, since you're not using state, you can use defaultValue. This means the native input will manage its own state. This is ok since you're saving the search query to the URL instead of state.

React Hook Form

• Yup Validation

Multipart File Upload

Article

Links

• Forms and Mutations
• Shadcn Auto Form