📝

【Next.js】Rewritesを使ってAPIを叩く

2025/08/23に公開

APIのエンドポイントを環境変数で読み込んで使用していましたが、セキュリティの観点からNEXT_PUBLICを付与せずに使用していたため、クライアント側からAPIを叩けない問題が発生していました。
そこでnext.config.tsのRewritesを使って解決することができましたのでその方法をメモとして残していきたいと思います。
内容に不備があったり、間違いがあった場合ご教授いただけますと幸いです。

※Rewritesの公式ドキュメントは以下です。

Rewritesについて

Rewritesは受信したリクエストパスを書き換え、指定した宛先のパスにマッピングすることでリライトを可能にしています。
使い方は至ってシンプルでnext.config.tsにrewritesキーを使って書き換えを行なっていきます。

例：

next.config.ts

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/guide", // リクエストのパスパターン
        destination: "/docs/guide", // ルーティング先のパス
      },
    ];
  },
};

上記の例だと、ユーザが/guideにアクセスした場合/docs/guideのコンテンツが提供され、パスは/guideのまま表示されます。

プロキシとしての機能

rewritesですがプロキシとしての機能も持ち合わせているため、外部URLを指定することもできます。
これを上手く利用することで上記の課題を解決するに至りました。

例としてnext.config.tsを以下のようにします。

next.config.ts

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "https://dummyjson.com/:path*",
      },
    ];
  },
};

続いてfetch関数を作成していきます。

src/api.ts

const baseUrl = typeof window === "undefined" ? process.env.BASE_URL : "/api";

export const getUsers = async () => {
  const res = await fetch(`${baseUrl}/users`);
  return res.json();
};

このように記述することでサーバサイドでAPIを叩いた場合は環境変数を読み込み、クライアント側では/api/usersをfetchに指定しているためセキュアにAPIを叩くことができます。

▼リクエスト

アプリ内から呼び出している様になる

こんな感じでエンドポイントが外部に洩れるリスクを抑えることができたかなと思います。

まとめ

今回は事前にバック側で設定してもらっていたので問題なかったのですがCORSエラーも回避できるみたいです。（ブラウザから見ると同一オリジンという扱いになるからということなのかな、、、）
Apacheサーバだと.htaccessに呪文のように書き込んでいましたがNextだと直感的に書けるしこの辺の動きもよしなにこなしてくれるのでとても便利です。

Rewritesについて

プロキシとしての機能

まとめ

Discussion