Basic Server Action Forms
Create interactive forms that submit data directly to the server using Next.js Server Actions.
Basic Server Action Forms is a free Next.js 15 Fullstack (App Router + Server Actions) lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack (App Router + Server Actions) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Intro to Server Actions
Welcome to Server Actions! This powerful Next.js 15 feature allows you to define functions that run directly on the server, callable from your client components.
Think of them as a way to send data to your server without needing to create a separate API route. They simplify data mutations and form submissions.
Why Use Server Actions?
Server Actions offer several key benefits for your Next.js applications:
- Simplified Data Mutations: Directly call server-side code from your forms.
- Reduced Client-Side JS: Less JavaScript needs to be sent to the browser.
- Improved Performance: Actions run closer to your database, potentially reducing latency.
- Automatic Revalidation: They can automatically update cached data after a successful mutation (more on this in a later lesson!).
Defining a Server Action
A Server Action is an async function marked with the "use server" directive. This directive tells Next.js to treat the function as server-only code.
You can define actions directly in your components or in a separate file (e.g., app/actions.js) and import them.
// app/actions.js
"use server";
export async function createItem(formData) {
const itemName = formData.get("itemName");
console.log(`Server received: ${itemName}`);
// In a real app, you'd save 'itemName' to a database
}Connecting Form to Action
To link an HTML <form> element to a Server Action, you simply pass the action function directly to the form's action prop. It's that easy!
When the form is submitted, Next.js automatically invokes the specified Server Action.
// app/page.js
import { createItem } from './actions';
export default function Page() {
return (
<form action={createItem}>
<label htmlFor="item">New Item:</label>
<input type="text" id="item" name="itemName" required />
<button type="submit">Add Item</button>
</form>
);
}Accessing Form Data
When a form submits to a Server Action, the action function automatically receives a FormData object as its first argument.
You can use formData.get('fieldName') to retrieve the value of an input based on its name attribute.
// app/actions.js
"use server";
export async function processForm(formData) {
const username = formData.get("username");
const email = formData.get("email");
const age = formData.get("age");
console.log(`User: ${username}, Email: ${email}, Age: ${age}`);
// Perform server-side logic, e.g., save user to database
}Full Form Example
Let's combine what we've learned into a simple guestbook entry form. The Server Action will log the guest's message.
Remember, this code is for a Next.js environment and isn't runnable as a standalone JS file.
// app/actions.js
"use server";
export async function addGuestbookEntry(formData) {
const message = formData.get("message");
console.log(`New guestbook entry: ${message}`);
// In a real app, save to DB and revalidate cache
}
// app/page.js
import { addGuestbookEntry } from './actions';
export default function GuestbookPage() {
return (
<div>
<h1>Guestbook</h1>
<form action={addGuestbookEntry}>
<textarea name="message" rows="4" cols="30" placeholder="Your message..." required></textarea>
<button type="submit">Sign Guestbook</button>
</form>
</div>
);
}Handling Multiple Inputs
The FormData object efficiently captures all inputs within your form that have a name attribute. You can access them individually.
formData.get('inputName'): Gets the first value for a given name.formData.getAll('inputName'): Returns an array of all values for inputs with the same name (useful for multiple checkboxes).formData.entries(): Returns an iterator for all key/value pairs.
User Feedback: Loading States
When a form is submitting, it's good practice to provide visual feedback to the user. Next.js, along with React, provides the useFormStatus hook for this.
useFormStatus tells you if the parent <form> is currently submitting, allowing you to disable buttons or show a spinner.
// app/page.js (inside a component, e.g., SubmitButton.js)
import { useFormStatus } from "react-dom";
function SubmitButton() {
const { pending } = useFormStatus(); // Gets status from parent <form>
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
</button>
);
}
// In your page.js:
// import { addGuestbookEntry } from './actions';
// export default function Page() {
// return (
// <form action={addGuestbookEntry}>
// {/* ... other inputs */}
// <SubmitButton />
// </form>
// );
// }Quick Check
Which statements about basic Next.js Server Action forms are correct?
Recap & Next Steps
Great job! You've learned the fundamentals of creating basic forms with Next.js Server Actions:
- Server Actions are server-side functions marked with
"use server". - They simplify form submissions by allowing you to pass the action directly to a form's
actionprop. - Form data is accessed within the action via a
FormDataobject. - The
useFormStatushook helps implement loading indicators.
Next, we'll dive into how Server Actions can mutate data and automatically revalidate your UI!
Frequently asked questions
Is the “Basic Server Action Forms” lesson free?
Yes — the full text of “Basic Server Action Forms” is free to read here on the web, and the Next.js 15 Fullstack (App Router + Server Actions) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack (App Router + Server Actions) course, upgrade to CoddyKit PRO.
What will I learn in “Basic Server Action Forms”?
Create interactive forms that submit data directly to the server using Next.js Server Actions. You practise Next.js 15 Fullstack (App Router + Server Actions) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Next.js 15 Fullstack (App Router + Server Actions)?
No prior experience is required. Next.js 15 Fullstack (App Router + Server Actions) on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Basic Server Action Forms” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Next.js 15 Fullstack (App Router + Server Actions) lesson?
Yes. Every Next.js 15 Fullstack (App Router + Server Actions) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.