NewsDigest

NewsDigest はサンプルデータで動作するニュースダイジェスト向け Next.js（App Router）テンプレートです。Mantine UI を使ってカードレイアウトや静的ページを最小構成でまとめています。

このプロジェクト全体を基に開発を進めていただいても、必要な部分のみを抜粋してご利用いただいても構いません。

特徴

• サンプルニュース 5 件＋サンプル画像を用意
• EN / JP の 2 言語 UI（ヘッダーで切り替え）
• Hero / NewsCard / Header / Footer を Mantine コンポーネントで統一
• お問い合わせ／運営者情報／プライバシー／利用規約の静的ページ付き
• AI要約機能（Google Gemini API対応、モックモードも利用可能）
• ニュース取得サービス（外部API対応、モックモードも利用可能）
• Server Actions によるサーバー側処理

セットアップ

npm install
npm run dev

開発サーバーはデフォルトで http://localhost:3000 で起動します。ポートを変更する場合は npm run dev -- -p 3100 のように指定できます。

モックモードで使用する場合は、環境変数ファイル（.env.local）の準備は不要です。実際のAPIやAIサービスを使用する場合のみ、環境変数ファイルが必要です（詳細は「環境変数」セクションを参照）。

注意: npm run dev（開発モード）でハイドレーションエラーの警告が表示される場合がありますが、これは開発環境特有の現象です。npm run buildとnpm run start（本番モード）では発生しません。開発ツールやブラウザ拡張機能がHTMLを変更することが原因です。本番環境での動作には影響しません。

環境変数

モックモードで使用する場合: 環境変数ファイル（.env.local）の準備は不要です。USE_MOCK_SERVICES=true がデフォルトで有効になっており、環境変数を設定せずにそのまま動作します。

実際のAPIやAIサービスを使用する場合: env.example をコピーして .env.local にリネームし、以下の環境変数を設定してください。

変数名	説明	必須	デフォルト値
USE_MOCK_SERVICES	モックサービスを使用するかどうか	否	true
NEWS_API_URL	ニュース取得APIのURL	否	-
NEWS_API_KEY	ニュースAPIのAPIキー	否	-
AI_SERVICE_PROVIDER	AIサービスプロバイダー（gemini または openai）	否	openai
GEMINI_API_KEY	Google Gemini APIのAPIキー	否	-
GEMINI_MODEL	使用するGeminiモデル	否	gemini-2.0-flash-lite
OPENAI_API_KEY	OpenAI APIのAPIキー	否	-
OPENAI_MODEL	使用するOpenAIモデル	否	gpt-4o-mini

モックモード（デフォルト）

環境変数ファイル（.env.local）を準備する必要はありません。USE_MOCK_SERVICES=true がデフォルトで有効になっており、環境変数を設定せずにそのまま使用できます。サンプルデータとモック要約が使用されます。

実装モード

実際のAPIやAIサービスを使用する場合：

1. .env.local ファイルを作成（env.example をコピー）
2. USE_MOCK_SERVICES=false を設定
3. 使用するサービスに応じて以下を設定：
   • ニュースAPIを使用する場合: NEWS_API_URL と NEWS_API_KEY を設定
   • AIサービスを使用する場合（要約機能の例）:
     • AI_SERVICE_PROVIDER を設定（gemini または openai、デフォルト: openai）
     • Geminiを使用する場合: GEMINI_API_KEY を設定（GEMINI_MODEL はオプション）
       • 使用可能なGeminiモデル例:
         • 無料モデル: gemini-2.0-flash-lite, gemini-2.5-flash, gemini-flash-latest
         • 有料モデル: gemini-3-pro-preview, gemini-2.5-pro, gemini-1.5-pro
         • 詳細は Gemini API モデル一覧 を参照
     • OpenAIを使用する場合: OPENAI_API_KEY を設定（OPENAI_MODEL はオプション）
       • 使用可能なOpenAIモデル例: gpt-4o-mini, gpt-4o, gpt-3.5-turbo
       • 詳細は OpenAI API モデル一覧 を参照
   • 重要: GeminiSummaryService.ts または OpenAISummaryService.ts を使用する場合は、ご自身で十分に動作確認を行い、問題がないことを確認してから使用してください。また、プロンプトも用途に応じて適宜調整してください。

スクリプト

コマンド	説明
npm run dev	開発サーバー
npm run build	本番ビルド
npm run start	本番サーバー実行
npm run lint	ESLint

技術スタック

• Framework: Next.js 16 (App Router)
• UI Library: Mantine UI 7
• Language: TypeScript 5
• Styling: Mantine Core Styles
• i18n: next-intl
• AI: Google Generative AI (Gemini) / OpenAI - オプション
• Date Handling: date-fns 4

ディレクトリ構成（抜粋）

• src/app/layout.tsx：メタデータと Mantine Provider
• src/app/page.tsx：トップページ（Hero + NewsCard グリッド）
• src/app/actions/：Server Actions（要約生成など）
• src/app/**/components：各ページ専用 UI（Contact など）
• src/components/*：共通 UI（HeroSection, NewsCard, PageLayout など）
• src/components/shared/*：共通レイアウト（Header, Footer, PageLayout）
• src/contexts/LanguageContext.tsx：簡易 i18n コンテキスト
• src/data/news.ts：サンプルニュースデータ
• src/services/news/：ニュース取得サービス（MockNewsService, ApiNewsService）
• src/services/summary/：AIサービス（OpenAI/Gemini呼び出し、要約機能の実装例）

アーキテクチャ

サービス層

プロジェクトはサービス層パターンを採用しており、モックと実装を環境変数で切り替えられます。

• ニュースサービス (src/services/news/)

  • MockNewsService: サンプルデータを使用
  • ApiNewsService: 外部APIまたは自前のデータベースに接続して情報取得
  • getNewsService(): 環境変数に基づいて適切なサービスを返す

• AIサービス (src/services/summary/)

  • OpenAIとGeminiのAI呼び出し機能を提供し、その一例として要約機能を実装しています
  • MockSummaryService: モック実装
  • GeminiSummaryService: Google Gemini APIを呼び出す実装
  • OpenAISummaryService: OpenAI APIを呼び出す実装
  • getSummaryService(): 環境変数に基づいて適切なサービスを返す（モック/Gemini/OpenAIを切り替え可能）
  • 補足:
    • 本プロジェクトではサンプルとしてGeminiとOpenAIを提供しています
    • 他のAIモデル（Claudeなど）を使用する場合は、既存のサービス実装（GeminiSummaryService.tsやOpenAISummaryService.ts）を参考に新しいサービス実装を作成し、getSummaryService()を適宜修正してください
    • 用途も要約以外（翻訳、チャット、コンテンツ生成など）に変更できます。SummaryServiceインターフェースを実装し、プロンプトやAPI呼び出し方法を用途に応じて調整してください

Server Actions

src/app/actions/summarize.ts に要約生成のServer Actionが実装されています。Client Componentからサーバー側の処理を安全に実行できます。