Use proxy in next config ?

[DamienA24]

Hello all!

Is it possible to use proxy in next config ? I try this code and the route generate where I want to fetch my data is ok, but I got a code 404, my code in next.config.js :

const withPlugins = require("next-compose-plugins");
  const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
const withImages = require("next-images");
const withFonts = require("next-fonts");

let target = "http://host.docker.internal:8082";

if (process.env.NODE_ENV === "pre-prod") {
  target = "http://host.docker.internal:.developpement:8082";
} else if (process.env.NODE_ENV === "production") {
  target = "http://host.docker.internal:.production:8082";
}

const proxy = {
  async rewrites() {
    return [
      {
        source: "/api/*",
        destination: target,
      },
    ];
  },
};

const nextConfiguration = {
  ...proxy,
  env: {
    BACKEND_URL: target,
  },
};

module.exports = withPlugins(
  [withBundleAnalyzer, withImages, withFonts],
  nextConfiguration
);

It seems because I use docker I think, no ? actually for use my proxy I use a custom server (only for that)
Someone has an idea for use proxy with docker ? thnak you!

[timneutkens]

async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: target + ':path*',
      },
    ];
  },

[DamienA24]

Hello @timneutkens

Thanks for your answer, I already try this way and I got the same result my route is call and the answer is 404 it's not an response from server, I can't get in touch with :(

[DamienA24]

For info, this my code it works with custom server :

const proxyMiddleware = require("http-proxy-middleware");
const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 3001;
const dev = process.env.NODE_ENV && !process.env.NODE_ENV.includes("prod");
const app = next({ dev });

const handle = app.getRequestHandler();
let target = "http://host.docker.internal:8082";

if (process.env.NODE_ENV === "pre-prod") {
  target = "http://commande-en-ligne-back.developpement:8082";
} else if (process.env.NODE_ENV === "production") {
  target = "http://commande-en-ligne-back.production:8082";
}
const proxy = {
  "/api": {
    target,
    changeOrigin: true,
    pathRewrite: { [`^api/`]: "" }
  }
};

app.prepare().then(() => {
  const server = express();

  if (proxy) {
    Object.keys(proxy).forEach(function(context) {
      server.use(proxyMiddleware(context, proxy[context]));
    });
  }

  server.all("*", (req, res) => handle(req, res));

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});
```

[DamienA24]

it works finally 👍

I needed to add "api" after "target" also, like this :

const proxy = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `${target}/api/:path*`,
      },
    ];
  },
};