Creating a Form using React and NextJS App Router

To create a form in React v18+ and NextJS App Router, there is some prerequisite knowledge required.

Just a weird A.I. generated image for the prompt “form data” :)

Prerequisites

This article assumes that you already have the following knowledge:

React

1. Specifically what components and state are.
2. React Server Components

Next

1. How Server Side Rendering works
2. How to use React Server Components in NextJS
3. How to use Client Components in NextJS
4. How to interleave Server and Client Components

Shameless plug: Feel free to check my article that covers all of these NextJS prerequisites: React Server Components VS Client Components in NextJS App Router | by janac | Jan, 2024 | Medium

High-level Summary

1. Create form elements such as text inputs, checkboxes etc., in a React Client Component
2. Use the formAction attribute on a <form> to call a callback function that will receive the form data
3. Put the callback function into it’s own module (file) with the annotation "use server"; — this makes the function a NextJS Server Action