Next.js Server Actionsフォーム送信プロンプト作例
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
Next.jsのServer Actionsを使って、フォーム送信をクライアントサイドの再レンダリングなしで実現する例を作成してください。'use server'ディレクティブを使用し、useFormStatusでローディング状態を表示、Reactのステートで成功/エラーメッセージを表示し、Tailwind CSSでスタイリングします。フォームは完全にアクセシブルで、バリデーション（必須フィールド、メール形式）を含めてください。単一のHTMLファイルにスクリプトを埋め込んで出力してください。
この例は、Next.jsのServer Actionsを使ったフォーム送信を示しています。フォームは「use server」ディレクティブのパターンを使い、ページ全体のリロードなしで送信されます。必須フィールドとメール形式のクライアントサイドバリデーション、useFormStatusによるローディング表示、成功・エラーメッセージの表示を含みます。UIはTailwind CSSでスタイリングし、クリーンでレスポンシブなデザインです。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選