Next.js Server Actions Form — AI-Generated Code Example
CODE PREVIEW
P
Prompt
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でスタイリングし、クリーンでレスポンシブなデザインです。
Prompt Overview
This example demonstrates form submission using Next.js Server Actions. The form uses the "use server" directive pattern and submits without a full page reload. It includes client-side validation for required fields and email format, loading state display using useFormStatus, and success/error message display. The UI is styled with Tailwind CSS for a clean, responsive design.
Was this prompt helpful?
Comments
Comments appear after moderation