基础服务器操作表单
创建交互式表单，使用 Next.js 服务器操作将数据直接提交到服务器
基础服务器操作表单 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
服务器操作简介
欢迎学习服务器操作！这项强大的 Next.js 15 功能允许您定义直接在服务器上运行的函数，并从客户端组件调用它们。
您可以将它们理解为一种向服务器发送数据的方式，而无需创建单独的 API 路由。它们简化了数据变更和表单提交。
为什么使用服务器操作？
服务器操作可以为您的 Next.js 应用带来多项重要优势：
- 简化数据变更：直接从表单调用服务器端代码。
- 减少客户端 JS：需要发送到浏览器的 JavaScript 更少。
- 提升性能：操作在距离数据库更近的位置运行，因此可能会减少延迟。
- 自动重新验证：成功完成变更后，它们可以自动更新缓存数据（稍后的课程会详细介绍！）。
定义服务器操作
服务器操作是一个带有 "use server" 指令的 async 函数。该指令会告诉 Next.js 将此函数视为仅在服务器端运行的代码。
您可以直接在组件中定义操作，也可以在单独的文件（例如 app/actions.js）中定义后再导入。
// 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
}将表单连接到操作
要将 HTML <form> 元素连接到服务器操作，只需将操作函数直接传递给表单的 action 属性即可。就是这么简单！
提交表单时，Next.js 会自动调用指定的服务器操作。
// 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>
);
}访问表单数据
当表单提交到服务器操作时，操作函数会自动将一个 FormData 对象作为第一个参数接收。
您可以使用 formData.get('fieldName')，根据输入元素的 name 属性获取其值。
// 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
}完整表单示例
让我们把所学内容整合到一个简单的留言簿条目表单中。服务器操作会记录访客的留言。
请记住，此代码用于 Next.js 环境，不能作为独立的 JS 文件运行。
// 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>
);
}处理多个输入
FormData 对象可以高效地捕获表单中所有带有 name 属性的输入。您可以分别访问这些输入。
formData.get('inputName')：获取给定名称对应的第一个值。formData.getAll('inputName')：返回具有相同名称的所有输入值组成的数组（适用于多个复选框）。formData.entries()：返回包含所有键值对的迭代器。
用户反馈：加载状态
提交表单时，最好向用户提供视觉反馈。Next.js 与 React 一起提供了 useFormStatus 钩子来实现这一点。
useFormStatus 会告诉您父级 <form> 当前是否正在提交，这样您就可以禁用按钮或显示加载指示器。
// 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>
// );
// }快速检查
关于基本的 Next.js 服务器操作表单，以下哪些说法是正确的？
回顾与后续步骤
做得很好！您已经学习了使用 Next.js 服务器操作创建基本表单的基础知识：
- 服务器操作是带有
"use server"标记的服务器端函数。 - 通过将操作直接传递给表单的
action属性，可以简化表单提交。 - 在操作中，可以通过
FormData对象访问表单数据。 useFormStatus钩子有助于实现加载指示器。
接下来，我们将深入了解服务器操作如何变更数据并自动重新验证您的界面！
用 AI 导师学习 TypeScript — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 22
- 课程
- 88
常见问题解答
「基础服务器操作表单」课时是免费的吗？
是的 — 「基础服务器操作表单」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
「基础服务器操作表单」这节课中我会学到什么？
创建交互式表单，使用 Next.js 服务器操作将数据直接提交到服务器 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack (App Router + Server Actions)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「基础服务器操作表单」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 基础服务器操作表单
- 修改数据与重新验证
- 操作中的错误处理
- 使用服务器操作实现乐观界面与待处理状态