Next.js：ローカルで実行してもサーバーの API を利用するには

以前 React で書いたものの Next.js の場合になります。
Next.js は API Routes を通すこともできますが、バックエンドを単純に呼びたいだけなら rewrites が便利です。

設定方法

next.config.mjs に rewrites の設定を追加します。
例として、バックエンドが http://example.com:3100 の /v1 に API がある場合は以下のようにします。

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "http://example.com:3100/v1/:path*",
      },
    ];
  },
};

export default nextConfig;

この場合、フロントエンドで /api/users に GET を要求した場合、
バックエンドの http://example.com:3100/v1/users に GET を要求して応答が得られます。