1. はじめに

前回の記事では、Django REST Framework（DRF）を利用して、コサイン類似度を用いたおすすめ記事 API を実装しました。
今回は、その API を Next.js でどのように利用し、フロントエンドにデータを表示するかを解説します。

2. Next.js で Django API を取得

Next.js では、fetch を使って Django の API からデータを取得し、記事ページを動的に生成します。
今回は ISR（Incremental Static Regeneration）を採用し、適度なキャッシュを利用してパフォーマンスを最適化します。

2.1 記事データの取得

以下のコードでは、Django の API から記事データを取得し、ISR を適用して 24 時間ごとに再検証するように設定しています。

JAVASCRIPT
const res = await fetch(`${process.env.BACKEND_URL}/api/posts/${slug}/`, {
  next: { revalidate: 86400, tags: [slug, "categories", "themes"] }, // 24時間キャッシュ
});

next.revalidate: 86400 により、1 日ごとにデータを更新 し、API の負荷を軽減しつつ、一定時間ごとに最新データが反映されるようになります。

リアルタイムで常に最新データを取得したい場合は、cache: "no-store" を使用することで、毎回 API から最新のデータを取得できます。

JAVASCRIPT
const res = await fetch(`${process.env.BACKEND_URL}/api/posts/${slug}/`, {
  cache: "no-store", // キャッシュを無効化し、常に最新データを取得
});

この方式を採用すると、サーバー負荷が高くなるため、更新頻度やサーバーリソースを考慮して選択するのが重要です。

2.2 記事ページの実装

Next.js で API から取得したデータを記事ページとして表示するコードは以下のようになります。

app/posts/[slug]/page.js

JAVASCRIPT
import { notFound } from "next/navigation";
import PostDetail from "@/components/posts/PostDetail";
import { metadata } from "@/app/layout";
import { fetchPostData } from "@/utils/api";

export default async function PostPage({ params }) {
  const post = await fetchPostData(params.slug);
  if (!post) return notFound();
  return <PostDetail post={post} />;
}

記事が見つからない場合は notFound() を返し、PostDetail コンポーネントで記事を表示するシンプルな構成になっています。

3. 推奨記事の取得

記事の詳細ページでは、関連記事のリストを表示するため、おすすめ記事 API を利用します。

Recommendation.js

JAVASCRIPT
"use client";

import Link from "next/link";
import { useState, useEffect } from "react";

const Recommendation = ({ slug }) => {
  const [recommendations, setRecommendations] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchRecommendations() {
      try {
        const res = await fetch(
          `${process.env.BACKEND_URL}/recommend/${slug}/`
        );
        if (res.ok) {
          const data = await res.json();
          setRecommendations(data);
        }
      } catch (error) {
        console.error("Error fetching recommendations:", error);
      } finally {
        setLoading(false);
      }
    }
    fetchRecommendations();
  }, [slug]);

  if (loading) return <p>読み込み中...</p>;
  return (
    <div>
      <h3>おすすめ記事</h3>
      <ul>
        {recommendations?.map((rec) => (
          <li key={rec.slug}>
            <Link href={`/posts/${rec.slug}`}>{rec.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Recommendation;

4. まとめ

今回は、Django REST Framework の API を Next.js で活用する方法 を解説しました。

• ISR を活用して記事データをキャッシュしつつ、定期的に更新する方法
• 記事の詳細ページを動的に生成する実装
• おすすめ記事 API を Next.js で利用する方法