Proxying requests

[alex-rhodes]

Hi there,

I have been looking through these discussions to try and help answer this question but have been unsuccessful.

Essentially, I am building a proof of concept whereby I fetch data at build time (using getStaticProps) and then also fetch data on the client. This data is at https://www.ProductionDomain.co.uk/product-api/pdp-service/partNumber/(partNumber). The partNumber here is passed into the fetch request and not taken from the URL.

I initially had this working using a custom server.js file, however this seemed to be an old/depreciated way of doing this. I have therefore tried with an api route, a rewrite in my next.config.js file as well as a rewrite inside of a vercel.json however none have been successful. These are as follows:

API Route (pages/api/product-api/pdp-service/[...slug].js)

import { createProxyMiddleware } from "http-proxy-middleware";

// Create proxy instance outside of request handler function to avoid unnecessary re-creation
const options = {
  target: "https://www.ProductionDomain.co.uk",
  changeOrigin: true,
};

const apiProxy = createProxyMiddleware(
  "/product-api/pdp-service/partNumber/",
  options
);

export default function (req, res) {
  apiProxy(req, res, (result) => {
    if (result instanceof Error) {
      throw result;
    }

    throw new Error(
      `Request '${req.url}' is not proxied! We should never reach here!`
    );
  });
}

next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: "/product-api/pdp-service/partNumber/",
        destination: "https://www.ProductionDomain.co.uk",
      },
    ];
  },
};

vercel.json

{
  "rewrites": [
    {
      "source": "/product-api/pdp-service/partNumber/",
      "destination": "https://www.ProductionDomain.co.uk"
    }
  ]
}

None of the above are working, but I think I may just have something configured wrong? I was wondering if anyone could help out?