Proxy api requests w/o a custom server

[athrunsun]

Official code example uses a custom server, however by using a custom server, we will lose important performance optimizations, like serverless functions and Automatic Static Optimization. This is NOT acceptable to me.

[dsauna]

did you find a solution for this?

[athrunsun]

Yes, please take a look at the marked answer. Looks like I misunderstood this type of discussion "show and tell" - I thought it doesn't need to be answered.

Now I edited the question and answered my own question.

[athrunsun]

So I went ahead and found a way to proxy api requests to another server with nextjs builtin "Catch all API routes" capability, using a 3rd party library http-proxy-middleware.

Here is my src/pages/api/proxy/[...slug].js file:

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

// Create proxy instance outside of request handler function to avoid unnecessary re-creation
const apiProxy = createProxyMiddleware({
    target: 'http://localhost:5000',
    changeOrigin: true,
    pathRewrite: { [`^/api/proxy`]: '' },
    secure: false,
});

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!`);
    });
};

So all api requests starting with /api/proxy will be forwarded to http://localhost:5000.

[damonleelcx]

For some reason it's not working for me and gives me errors like below:
All my server requests start with just /api

TypeError: Object(...) is not a function
    at Module../pages/api/[...slug].js (/home/user/app/client/.next/server/pages/api/[...slug].js:109:101)
    at __webpack_require__ (/home/user/app/client/.next/server/pages/api/[...slug].js:23:31)
    at /home/user/app/client/.next/server/pages/api/[...slug].js:91:18
    at Object.<anonymous> (/home/user/app/client/.next/server/pages/api/[...slug].js:94:10)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at DevServer.handleApiRequest (/home/user/app/client/node_modules/next/dist/next-server/server/next-server.js:64:181)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async Object.fn (/home/user/app/client/node_modules/next/dist/next-server/server/next-server.js:56:492)
    at async Router.execute (/home/user/app/client/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/home/user/app/client/node_modules/next/dist/next-server/server/next-server.js:66:1042)

[mattvb91]

Does anyone have a solution for using the provided code by @athrunsun (Which works exactly as needed) but making it usable as an internal API call for getServerSideProps without actually doing a fetch? I would like to directly call that method from inside getServerSideProps to resolve it from the function?

Currently it only returns a promise that resolves to undefined

[peppermint-juli]

THANK YOU SO SO SO MUCH FOR THIS!! I've looking non stop for a decent way to use a proxy with NextJS and this is the only thing that has worked!!! Complete game changer!

[jankoritak]

Does anyone also have an issue getting infinite 301 from the server when going through the proxy? 🤔

[cancan101]

Is there anyway to get this to work on a path that doesn't start with /api? For example if I want my proxy at just /proxy?

[Janpot]

You can use custom routes for this:

rewrites: () => [
  { source: '/api/proxy/:path*', destination: 'http://localhost:5000/:path*' }
]

[athrunsun]

So it is still experimental? Have you used this technique to proxy requests to external server?

[Janpot]

So it is still experimental?

It's close to being released (#14602)

Have you used this technique to proxy requests to external server?

That's one of its intended use cases yes

[athrunsun]

Great, I'll give it a try when it's released.

[dsauna]

This seems amazing! One problem that I had with the orignial solution is that all the endpoints need to start with /api for the middleware to work. I tried changing all of my calls to /api/whateverMyBackend and then do a rewrite but the problem was that that backend called another endpoint and that one failed. @Janpot with the custom routes I shouldn't have that problem, right?

[gfazioli]

I tried but the headers aren't sent, I mean, I would like to "proxy" the cookies as well, any clue?

[tomdohnal]

I think that the official example which uses a custom server should be rewritten to the catch-all API routes approach outlined here.
I'm happy to send a PR if this is something you'd accept @timneutkens

[Birkenstab]

There is now an official feature for this: Rewrites
Besides normal path rewrites, they can also proxy requests to a different webserver

next.config.js

module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/:path*',
          destination: 'http://localhost:5000/:path*' // Proxy to Backend
        }
      ]
    }
  }

See Next.js Docs Rewrites

[edersonsilva]

There is now a official feature for this: Rewrites
Besides normal path rewrites, they can also proxy requests to a different web server

next.config.js

module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/:path*',
          destination: 'http://localhost:5000/:path*' // Proxy to Backend
        }
      ]
    }
  }

See Next.js Docs Rewrites

export async function getStaticPaths() {
  const res = await fetch("/api/products"); <================ It works here ?
  const products = await res.json();

  const paths = products.products.map(product => ({
    params: { id: product.id.toString() }
  }))

  return {
    paths,
    fallback: false
  }
}

[Brazuca228]

There is now a official feature for this: Rewrites
Besides normal path rewrites, they can also proxy requests to a different web server
next.config.js

module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/:path*',
          destination: 'http://localhost:5000/:path*' // Proxy to Backend
        }
      ]
    }
  }

See Next.js Docs Rewrites

export async function getStaticPaths() {
  const res = await fetch("/api/products"); <================ It works here ?
  const products = await res.json();

  const paths = products.products.map(product => ({
    params: { id: product.id.toString() }
  }))

  return {
    paths,
    fallback: false
  }
}

true

[anoushk1234]

same here

[1ambda]

Thanks for code snippet above. Was able to write proxy api route w/o HPM.

Here is my pages/api/proxy/[...slug].ts file. Hope this might help others.

const proxyConfig: any = {
    logLevel: process.env.NODE_ENV === "production" ? "silent" : "warn",
    target: ENDPOINT_PROXY_API,
    pathRewrite: { "^/api/proxy": "" },
    changeOrigin: true,
    ws: true,
    onError(err, req, res: any) {
        res.writeHead(302, {
            Location: `${ENDPOINT_PROXY_ORIGIN}/exception?message=${err.message}`,
        })
        res.end()
    },
    onProxyReq(proxyReq, req: any, res) {
        /**
         * manually overwrite origin for CORS (changeOrigin might not work)
         */
        proxyReq.setHeader("origin", ENDPOINT_PROXY_ORIGIN)

        const requestId = greq.headers[HEADER_REQUEST_ID] // passed from fetch (Browser) to keep request id in browser too
        const endpoint = req.url
        const method = req.method

        logger.info(`[${PlatformUtil.getLoggerTag()}] (${requestId}) REQ ${endpoint} ${method}`)
    },
    onProxyRes(proxyRes, req: any, res) {
        const requestId = greq.headers[HEADER_REQUEST_ID] // passed from fetch (Browser) to keep request id in browser too
        const endpoint = req.url
        const method = req.method
        const status = proxyRes.statusCode

        logger.info(`[${PlatformUtil.getLoggerTag()}] (${requestId}) RES ${endpoint} ${method} ${status} `)
    },
}

const proxied = createProxyMiddleware(proxyConfig)

export const config = {
    api: {
        // - https://nextjs.org/docs/api-routes/api-middlewares#custom-config
        externalResolver: true,
        bodyParser: false, // not to use url encoded form like streaming POST request
    },
}

export default proxied

[francemj]

You used HPM when you used createProxyMiddleware, didn't you?

[Linyan-ma]

i still get "blocked by CORS policy",anyone can help?

[mpiorowski]

Rewrites doesnt work when it comes down to webscokets.

[RacketyWater7]

@tomsvogel I wish I had paid attention to your comment 2 hours before
same case. This addition should be added to the above solution so that other people won't have to go through what we did.