Server Actionsフォーム送信｜Next.js作例・プロンプト
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
Next.jsのServer Actionsを使ったフォーム送信のデモページを作成してください。サーバーアクションでフォームデータ（例：名前とメール）を処理し、成功メッセージを返します。エラーハンドリングとローディング状態（useActionStateまたはuseTransitionを使用）を含めてください。コードは単一ファイル（page.tsx）で、'next/server'と'react'からインポート。スタイリングはTailwind CSSを使用。機能的かつ簡潔に。
このデモは、Next.jsのServer Actionsを使用したフォーム送信を示しています。フォームはページをリロードせずにサーバーアクションにデータを送信します。ローディング状態、エラーハンドリング、成功フィードバックを含みます。コードはReactの状態と非同期関数を使用して、デモ用にクライアント側でサーバーアクションをシミュレートしています。実際のNext.jsアプリケーションでは、submitForm関数は'use server'ファイルに配置します。UIはプレーンなHTMLとReactで構築され、クリーンでレスポンシブな体験を提供します。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選