Image

このプロジェクトでは、デジタルコンテンツ(記事・電子書籍)を販売する EC サイトを構築します。

コンテンツサービスで有名な、note のように記事の有料・無料での公開ができたり、 Zenn のように本の有料・無料での公開ができる機能を実装します。

Next.js における、Auth.js を用いた認証機能の実装を学びます。

合わせて、stripe を使用した商品の購入(決済)フローについても、確認してください。

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

• Auth.js v5 による認証(GitHub ソーシャルログイン)
• Stripe によるオンライン決済
• GitHub API によるコンテンツ取得
• Next.js 15 App Router でのプロジェクト構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui によるコンポーネントの導入

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

1. 認証機能:
   • GitHub アカウントでログイン/ログアウト
   • ログイン状態の保持
2. コンテンツ一覧表示:
   • トップページに特集コンテンツを大きく表示
   • コンテンツの一覧をグリッドで表示
   • 有料/無料を明示
3. コンテンツ詳細表示:
   • コンテンツの詳細ページを実装する
   • 記事の詳細ページの URL は、domain.com/posts/[slug]の形式にする
   • 本の各章の詳細ページの URL は、domain.com/books/[book-slug]/[chapter-slug]の形式にする
4. 決済機能:
   • Stripe による有料販売の実装
   • 購入済みのコンテンツ管理

コンテンツは、GitHub 上での管理をお勧めします。

• その場合、データ取得には、開発者向けの GitHub API を使用できます
• 今回のアプリで使用可能な、コンテンツのダミーデータを使用することも可能です。
• 👀ダミーデータ用リポジトリ

• トップページ:
  • ユーザーがサイトにアクセスすると、ナビゲーションバーにログインボタンが表示されている
  • トップには特集コンテンツが大きく表示されている
  • 記事・本のコンテンツ一覧が、それぞれ横1列のレイアウトで表示されている
  • 各コンテンツカードには、タイトル、タグが表示される
  • 有料コンテンツには、価格が明確に表示される
  • コンテンツカードをクリックすると、詳細ページに遷移する
• 詳細ページ:
  • 無料コンテンツは全文が表示される
  • 有料コンテンツは購入しないと閲覧することができない
  • 有料コンテンツには購入ボタンが表示される
  • 購入済みの場合は全文を閲覧できる
• 認証/決済:
  • GitHub アカウントでログインできる
  • ログイン状態が保持される
  • Stripe でクレジットカード決済ができる
  • 購入後すぐにコンテンツを閲覧できる