Next.JS rewrite isn't happening

Question

I hope this question is clear, I am somewhat at the end of my mental resources at the moment.

I have some Nginx rewrites happening in production, I need to reproduce this functionality in my nextjs app on the frontend.

So my rewrites rules look like the following

const rewrites = process.env.NODE_ENV === "development" ?
  [{
    source: '/ovp/userdevices',
    destination: 'https://userdevices.backendservices.dk'
  },

  {
    source: '/ovp/userdevices/:path*',
    destination: 'https://userdevices.backendservices.dk/:path*'
  }
  ] : [];

and in my configuration

async rewrites() {
    console.log("Rewrites called");
    return rewrites;
  },

I get the console log, and the array is what it is supposed to be. But my /ovp/userdevices urls never get rewritten, and so we are always running localhost:3000/ovp/userdevices.

I am supposing at the moment that the rewrites never happen because these are supposed to be done on the serverside and maybe everything is being rendered frontend but I don't know how to test this supposition.

My current config looks like

{
  poweredByHeader: false,
  target: 'serverless',
  distDir: 'build',
  basePath: '',
  rewrites: [AsyncFunction: rewrites],
  redirects: [AsyncFunction: redirects],
  pageExtensions: [ 'route.js' ],
  env: {
    SUPPORTED_BROWSERS: 'chrome 84;chrome 83;edge 84;edge 83;firefox 79;firefox 78',
    APP_VERSION: '0.0.1',
    APP_NAME: 'some-app/app-self-service'
  },
  webpack: [Function: webpack]
}

Can anyone point me to a reason why the rewrites would not be happening?

On Edit: I'm not going to delete the question in that maybe someone will find a use for it, but I was wrong, it was being rewritten it's just the url it was going to was failing. I didn't figure out why because I found a simpler hack to solve my problem.

Answer 1

You can't use the name rewrites twice. Make next.config.js look like this:

module.exports = {
  async rewrites() {
    console.log("Rewrites called");
    return process.env.NODE_ENV === "development"
      ? [
          {
            source: "/ovp/userdevices",
            destination: "https://userdevices.backendservices.dk",
          },

          {
            source: "/ovp/userdevices/:path*",
            destination: "https://userdevices.backendservices.dk/:path*",
          },
        ]
      : [];
  },
};