Next.jsでのAPI呼び出しを基礎から解説：内部APIと外部APIを使い分ける方法

フロントエンド開発•2025/1/28

Next.js React JavaScript

はじめに

Next.jsはReactをベースとしたフレームワークで、サーバーサイドの機能も持っています。そのため、単純なフロントエンドアプリケーションの範囲を超えた開発をしやすいと言えます。

中でも、API呼び出しの仕組みは多くの人が気になるところではないでしょうか。どのようにデータを取得し、どのようにフロントエンドへ渡すのかが整理できると、効率的に開発できるようになります。

そこで今回は、Next.jsでのAPI呼び出し方法を中心に、実務への応用を見据えた使い方を解説していきます。初心者の方にもわかりやすく、コード例を交えながら進めますので、少しでも参考になればうれしいです。

この記事を読むとわかること

Next.jsにおける内部APIの作り方
クライアントからAPIを呼び出す具体的な方法
実務で活用しやすいサンプルコードの組み方
予期せぬエラーへの対処やセキュリティ面での留意点
サーバーサイドレンダリングや静的生成との関係

Next.jsにおけるAPI呼び出しの概要

Next.jsはReactライブラリに、サーバーサイドの機能が追加された構成です。一般的にはフロントエンドから外部APIを呼び出すケースも多いですが、Next.jsにはAPI Routesという仕組みが備わっており、自前でAPIを作ることが可能です。

たとえば、データベースへの問い合わせや外部サービスとのやりとりをサーバー側で代行できるため、複雑なデータ処理をクライアントに書く必要がありません。これはセキュリティの観点でも有効で、ブラウザから直接秘匿情報にアクセスするリスクを低減できます。

また、Next.jsではgetServerSidePropsを使ってサーバーサイドでデータを取得し、その結果をコンポーネントへ渡す方法もあります。静的に生成するgetStaticPropsとも組み合わせることで、ビルド時にデータを取り込み、配信負荷を下げる工夫をすることもできます。

このように、Next.jsにおけるAPI呼び出しは大きく分けると次の3つになります。

外部のAPIをクライアントサイドで直接呼び出す方法
Next.jsのAPI Routesを利用し、内部APIを用意して呼び出す方法
getServerSidePropsなどの仕組みを利用し、サーバー側でデータを取得してから渡す方法

これらを理解しておくと、状況に応じて最適な構成を考えやすくなります。

API Routesを使ってAPIを構築する

Next.jsのAPI Routesは、pages/apiディレクトリにJavaScriptファイルを作成するだけで利用できます。特別な設定なしにエンドポイントを作れるので、試しやすいですよね。

APIの作成手順

pages/apiディレクトリにファイルを用意します。
export defaultされた関数の中で、リクエストとレスポンスを受け取ります。
必要に応じてデータを加工し、レスポンスを返します。

この3ステップだけで、シンプルなAPIを完成させることができます。 RESTfulな設計にするもよし、GraphQLなどの導入も検討できます。

APIのサンプルコード

以下は簡単な例です。ユーザー情報を返すAPIを仮定し、JSON形式でレスポンスを返してみましょう。


// pages/api/users.js
export default function handler(req, res) {
  if (req.method === "GET") {
    const users = [
      { id: 1, name: "Taro" },
      { id: 2, name: "Hanako" },
    ];
    res.status(200).json(users);
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
}

req.methodを使うことで、HTTPメソッドに応じた処理を分岐できます。たとえば、POSTリクエストで新しいユーザーを追加する処理を実装することも可能です。

API Routesで外部サービスのAPIキーなどを使う場合は、ブラウザ側に漏れないように注意しましょう。

APIキーやデータベース接続のための接続情報を保管する方法はいくつかありますが、環境変数を活用して管理するケースも少なくありません。環境変数を使うことでリポジトリ上に認証情報を残さないようにして、セキュリティを確保します。

クライアント側でのAPI呼び出し

Next.jsで作成した内部API、あるいは外部サービスのAPIをクライアントサイドで呼び出す方法を見ていきましょう。基本的には通常のReactアプリと同じく、fetchやAxiosなどのライブラリを用いてデータ取得を行います。

fetchを使った例

もっともシンプルな方法は、fetch関数を使うやり方です。 Reactコンポーネント内でuseEffectを活用してデータを取得する例を見てみます。


import { useState, useEffect } from "react";

export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then((res) => res.json())
      .then((data) => setUsers(data))
      .catch((error) => {
        console.error("Failed to fetch users:", error);
      });
  }, []);

  return (
    <div>
      <h2>ユーザー一覧</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

ここでは、/api/usersという内部APIを呼び出し、取得できたデータをステートに保存しています。エラーが出た場合はcatchで補足しておくと、原因の調査がしやすくなります。

getServerSidePropsを使った例

クライアントサイドではなく、サーバーサイドでデータを取得してページを生成したい場合はgetServerSidePropsが便利です。たとえばユーザー一覧をSSR（Server-Side Rendering）で表示する場合のコードは次のようになります。


// pages/users-ssr.js
export async function getServerSideProps() {
  const res = await fetch("http://localhost:3000/api/users");
  const data = await res.json();

  return {
    props: {
      users: data,
    },
  };
}

export default function UsersSSR({ users }) {
  return (
    <div>
      <h2>サーバーサイドで取得したユーザー一覧</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

このように、ビルド時やリクエスト時にサーバー側でデータを取得しておくと、クライアントに返すHTML自体に初期データが組み込まれた状態となります。検索エンジンがページ内容を正確に読み取りやすいといったメリットもありますが、サーバーに負荷がかかる点には気をつけましょう。

エラー処理とセキュリティ

API呼び出しをするうえで大切なのは、エラー時の処理やセキュリティ対策です。たとえば、API側で予期しないエラーが起きた場合にはステータスコードを返し、クライアント側で適切にエラー表示を行うとユーザーに混乱を与えにくくなります。

また、APIキーなどの機密情報は、サーバー側でのみ扱うのが基本です。フロントエンドからは必要最小限の情報だけをやりとりする形を作ってください。さらに、ログを出力する際はAPIキーやパスワードなどが紛れ込まないように注意しましょう。

APIから返すデータ量が大きい場合、ページングやフィルタリングを実装すると通信量と表示速度のバランスを取りやすくなります。

不要に膨大なデータをやりとりすると、ユーザーの操作レスポンスが落ちてしまうことがあります。そのため、必要に応じてデータを部分的に取得する仕組みを取り入れると開発効率とユーザー体験の両方を向上させやすいです。

実務での活用シーン

実務では、Next.jsで構築した内部APIを経由して、各種クラウドサービスや社内システムと連携するといったシーンがあります。たとえば、外部決済サービスと通信したり、在庫管理システムと同期したりといった処理を、API Routesを使うことでシンプルにまとめられます。

同時に、ブラウザ側のJavaScriptだけでは実行が難しい重い処理もサーバー側で実行できるため、パフォーマンス面のメリットも期待できます。ユーザー数が多いプロジェクトなら、カスタムサーバーを検討して負荷分散を行いつつAPIエンドポイントを運用する方法もあります。

たとえば、独自の認証ロジックをNext.jsのAPI Routesでまとめておき、ユーザーからのログインリクエストを安全に取り扱うケースなどが典型的です。外部の認証プロバイダを使う場合でも、Tokensやセッション情報をサーバー内で管理することでセキュリティ上のリスクを減らしやすくなります。

まとめ

ここまで、Next.jsにおけるAPI呼び出しについて、内部APIの作り方やクライアント側での実装例、実務での活用アイデアなどを見てきました。次のような点を押さえておくと、開発がスムーズに進みやすいです。

pages/apiディレクトリを使えば、すぐに内部APIを立ち上げられる
fetchやAxiosを用いてクライアントサイドで取得したり、getServerSidePropsでサーバーサイドレンダリングを組み合わせたりできる
認証やデータベース接続情報などは、フロントエンドに漏れないように管理する
アプリの規模に応じてAPIの構成を選ぶと、保守性やセキュリティレベルを維持しやすい

初心者の方でもAPI Routesの仕組みを掴めれば、複雑なバックエンドを用意しなくても必要なデータを提供できるようになります。最初は簡単なJSONレスポンスから試し、徐々に要件に合わせて拡張する形を想定すると、開発の敷居を下げられるでしょう。