PR

【実践】Next.js で FastAPI などのバックエンドから API を取得する方法

2025.02.19

Next.js で FastAPI などのバックエンドから API を取得する方法について、詳細な手順を説明します。

Next.js で API を取得する方法

Next.js では、クライアントサイドとサーバーサイド両方で API を取得することができます。axios を使って API を呼び出す方法を紹介します。API を取得する基本的な流れは、以下のようになります。

  1. axios インストール
  2. API 呼び出しの実装
  3. データの表示
  4. サーバーサイドでの API 呼び出し（getServerSideProps）
  5. クライアントサイドでの API 呼び出し（useEffect）

1. axios のインストール

まず、API 呼び出しのために axios をインストールします。

npm install axios

axios は Promise ベースの HTTP クライアントで、API リクエストを簡単に行うことができます。

2. API 呼び出しの実装

Next.js で、API 呼び出しを行う方法として、以下の2つの方法があります。

A. サーバーサイドで API を呼び出す（getServerSideProps）

getServerSideProps は、ページリクエスト時にサーバーサイドで API を呼び出して、ページを生成するためのデータを取得するために使います。

例: サーバーサイドで FastAPI のデータを取得する

// pages/index.js
import axios from 'axios';

const Home = ({ message }) => {
  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

// サーバーサイドで API 呼び出し
export async function getServerSideProps() {
  try {
    const res = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/`);
    const message = res.data.message;

    return {
      props: { message }, // ページに渡すデータ
    };
  } catch (error) {
    console.error(error);
    return {
      props: { message: 'Failed to fetch data' },
    };
  }
}

export default Home;

この方法を利用すると、API 呼び出しがサーバーサイドで行われ、取得したデータがページに渡されます。ページがリクエストされるたびに、サーバー側でデータを取得します。

B. クライアントサイドで API を呼び出す（useEffect）

useEffect を使って、コンポーネントがレンダリングされた後にクライアントサイドで API を呼び出す方法です。API 呼び出しがクライアントサイドで行われるため、ページがブラウザにロードされてからデータを取得します。

例: クライアントサイドで API を呼び出す

// pages/index.js
import { useEffect, useState } from 'react';
import axios from 'axios';

const Home = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const fetchMessage = async () => {
      try {
        const res = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/`);
        setMessage(res.data.message);
      } catch (error) {
        console.error(error);
        setMessage('Failed to fetch data');
      }
    };

    fetchMessage();
  }, []); // コンポーネントがマウントされた後に一度だけ実行

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

export default Home;

この方法では、ページがブラウザにロードされた後に API リクエストが送信され、データが取得されるまで、表示されるメッセージが変わります。クライアントサイドでのみ API 呼び出しを行いたい場合に有効です。

3. 環境変数の設定

Next.js では、process.env を使用して環境変数を管理します。.env.local ファイルを作成して、API の URL を環境変数として設定します。

例えば、NEXT_PUBLIC_API_URL という環境変数を使って、API の URL を設定します。

// .env.local
NEXT_PUBLIC_API_URL=http://localhost:8000

これで、Next.js のどのコンポーネントでも process.env.NEXT_PUBLIC_API_URL を使って API URL を参照できます。

4. データの表示

API 呼び出しが成功したら、取得したデータをコンポーネント内で表示します。

getServerSideProps または useEffect で取得したデータを、そのまま JSX の中に表示できます。

5. エラーハンドリング

API 呼び出し時にエラーが発生する可能性があります。try-catch ブロックを使用して、エラーハンドリングを行います。例えば、ネットワークの問題やサーバーエラーが発生した場合に備えて、エラーメッセージを表示することができます。

まとめ

  • サーバーサイドで API を呼び出す (getServerSideProps): ページリクエスト時にサーバー側で API を呼び出し、その結果をページに渡します。SEO 対策に有効です。
  • クライアントサイドで API を呼び出す (useEffect): コンポーネントがマウントされた後にクライアントサイドで API を呼び出します。非同期的なデータの取得に便利です。

どちらの方法も、FastAPI などのバックエンド API からデータを取得するのに適しています。どちらを選ぶかは、アプリケーションの要件やパフォーマンスに基づいて決めると良いでしょう。

コメント

タイトルとURLをコピーしました