Using Forms in Next.js (Server Actions, Revalidating Data)

Learn how to create forms and handle data mutations in the Next.js App Router. This tutorial walks through using Server Actions, creating loading and error states with useFormStatus and useFormState, as well as accessibility best practices. https://www.seevid.ir/fa/w/dDpZfOQBMaU – Introduction https://www.seevid.ir/fa/w/dDpZfOQBMaU – Demo https://www.seevid.ir/fa/w/dDpZfOQBMaU – Forms with Pages Router https://www.seevid.ir/fa/w/dDpZfOQBMaU – create-next-app https://www.seevid.ir/fa/w/dDpZfOQBMaU – Server Component (Data Fetching) https://www.seevid.ir/fa/w/dDpZfOQBMaU – Forms and action prop https://www.seevid.ir/fa/w/dDpZfOQBMaU – Server Actions (and useFormState) https://www.seevid.ir/fa/w/dDpZfOQBMaU – Progressive enhancement https://www.seevid.ir/fa/w/dDpZfOQBMaU – Loading states (useFormStatus) https://www.seevid.ir/fa/w/dDpZfOQBMaU – Revalidating data and caching https://www.seevid.ir/fa/w/dDpZfOQBMaU – Accessibility and error states https://www.seevid.ir/fa/w/dDpZfOQBMaU – Conclusion ◆ Docs: https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations ◆ Example: https://github.com/vercel/next.js/tree/canary/examples/next-forms ◆ React Canary Example: https://codesandbox.io/s/vigorous-curran-glmlvf?file=/src/App.js ◆ Server Actions: https://nextjs.org/docs/app/api-reference/functions/server-actions ◆ "use server" : https://react.dev/reference/react/use-server