Next.js Server Actions 表单提交 AI 生成示例与提示词
代码预览
エディタを読み込み中…
P
提示词
Create a Next.js Server Actions example that submits a form (name and email) without client-side JavaScript re-render. Use 'use server' directive, show loading state with useFormStatus, display success/error messages using React state, and include Tailwind CSS for styling. The form should be fully accessible and have validation (required fields, email format). Output as a single HTML file with embedded scripts.
この例は、Next.jsのServer Actionsを使ったフォーム送信を示しています。フォームは「use server」ディレクティブのパターンを使い、ページ全体のリロードなしで送信されます。必須フィールドとメール形式のクライアントサイドバリデーション、useFormStatusによるローディング表示、成功・エラーメッセージの表示を含みます。UIはTailwind CSSでスタイリングし、クリーンでレスポンシブなデザインです。
提示词解读
此示例展示了使用Next.js的Server Actions进行表单提交。表单采用"use server"指令模式，无需重新加载整个页面即可提交。包含必填字段和电子邮件格式的客户端验证、通过useFormStatus显示加载状态、以及成功/错误消息的显示。UI使用Tailwind CSS进行样式设计，呈现简洁且响应式的布局。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選