ニュースサイト（お問合せフォーム付き）

概要

このプロジェクトでは、架空のテック系ニュースサイトを構築します。

メールフォームからニュースを購読することができます。また、個人・法人用のお問い合わせフォームも実装します。

学習目標

今回のテーマは、React/ Next.js におけるフォームの実装について、学習します。

特に、従来の React Hook Form, Zod を使用したフォームから、 サーバーアクションと組み合わせたフォーム実装について、理解を深めてください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• Next.js 15 App Router
• React Hook Form によるフォーム構築
• Conform による Actions 対応のフォーム実装
• Zod によるスキーマのバリデーション
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• Vercel へのデプロイ

---

🎯 お題

• 「ユーザーストーリー」を全て満たす、アプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
• なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. ニュースレター登録フォーム：
   • メールアドレスを登録し、ニュースを購読
   • （React 19 の Actions に対応した RHF ベータ版による実装）
2. 個人用問い合わせフォーム：
   • 名前、メールアドレス、問い合わせ内容を入力し、送信
   • （従来の React Hook Form を使用した実装）
3. 法人用お問い合わせフォーム：
   • お問いわせカテゴリ、会社名、メールアドレス、問い合わせ内容を入力し、送信
   • （Conform ライブラリを使用した実装）

ユーザーストーリー

共通

• ユーザーがサイトにアクセスすると、シンプルなホームページが表示される
• ナビゲーションから各種フォームページに移動できる
• 全てのフォームで適切なバリデーションが実装されている
• 送信成功時に適切なフィードバックが表示される
• アプリケーションがインターネット上に公開されており、誰でもアクセス可能である。

ニュースレター登録フォーム

• ユーザーがメールアドレスを入力できる
• バリデーションエラーが表示される
• 送信後に成功メッセージが表示される

個人用問い合わせフォーム（React 19 Actions + RHF Beta）

• ユーザーが名前、メールアドレス、問い合わせ内容を入力できる
• バリデーションエラーが表示される
• 送信後に成功メッセージが表示される

法人用お問い合わせフォーム（Conform）

• ユーザーがお問いわせカテゴリ、会社名、メールアドレス、問い合わせ内容を入力できる
• バリデーションエラーが表示される
• 送信後に成功メッセージが表示される