ギフプロギフプロ

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でスタイリングし、クリーンでレスポンシブなデザインです。

このプロンプトは役に立ちましたか?

コメント

コメントは承認後に表示されます

ホームヘルプ