デモサイト「newsdigest」｜Next.js Server Actions × 生成AI API 実装例

まえがき
テンプレート紹介
デモサイトURL
画面レイアウト
技術スタック
GitHubリポジトリ
実装のポイント
こんな人におすすめ
参考リンク

まえがき

本テンプレートのコードは自由にご利用いただけます。
少しでもプラスになれば筆者もうれしいです。

テンプレート紹介

本テンプレートは要約機能を備えたニュースサイトです。
Mantine UIを使ったカードレイアウト、EN/JPの2言語対応、ニュース記事を要約する機能を確認できます。

デモサイトURL

NewsDigest | ニュース要約

NewsDigest は、多言語 UI を備えたニュースダイジェストの Next.js テンプレートです。

画面レイアウト

ファーストビュー

ENボタン押下

要約ボタン押下

技術スタック

Framework: Next.js 16
UI Library: Mantine UI 7
Language: TypeScript 5
i18n: next-intl
Date Handling: date-fns 4
Server Actions: Next.js Server Actions
AI: Open API / Gemini API – （環境変数設定で利用可能）

GitHubリポジトリ

GitHub - xpendev/newsdigest

Contribute to xpendev/newsdigest development by creating an account on GitHub.

npm installとnpm run devのみで起動できます。モックで動作させる場合は環境変数設定が不要ですぐに動作確認できます。環境変数の設定方法はREADME.mdを参考にしてください。

実装のポイント

多言語対応構成

多言語対応の構成例は以下の通りです。

├── messages
│   ├── en.json
│   └── ja.json
├── next.config.ts
└── src
    ├── i18n
    │   └── request.ts
    └── app
        ├── layout.tsx
        └── page.tsx

en.json：翻訳ファイル（英語）
ja.json：翻訳ファイル（日本語）
next.config.ts：Next.js設定ファイル
request.ts：Cookieからロケール（jaかen)を取得し対応する翻訳ファイルを読み込む
next.config.ts（Next.js設定ファイル）：next-intlを追加

この構成により多言語化対応を実現しています。
i18nはinternationalizationのiとnの間の18文字

Service/ServerAction、モック実装⇔本実装切替の構成

モック実装と本実装を切替可能なService層とClient Componentから呼び出せるServer Actionの最小構成例は以下の通りです。

├── src
│   ├── services
│   │   └── summary
│   │       ├── SummaryService.ts
│   │       ├── MockSummaryService.ts
│   │       ├── OpenAISummaryService.ts
│   │       └── index.ts
│   └── app
│       └── actions
│           └── summarize.ts

SummaryService.ts：インターフェース。各実装クラスがそれを実装
MockSummaryService.ts：モック実装
OpenAISummaryService.ts：本実装
index.ts：環境変数の値によりモック実装か本実装を読み込む
summarize.ts：ServerAction。tsファイルに'use server'を付与することでServer Actionと定義され、Client Componentから呼び出し可能となる

AI機能

OpenAIのAPI呼出しを実装（OpenAISummaryService.ts）しており、環境変数設定により利用可能です。デモサイトではプロンプト（AIへの依頼内容）を要約としていますが、翻訳など他の用途に変更頂くことも可能です。