How to use next-connect with host proxy during development?

Question

I am using restinio as my backend API server. Previously I used ReactJS for front-end and solved this proxying issue using "proxy": "http://localhost:4000" in package.json as documented here; https://create-react-app.dev/docs/proxying-api-requests-in-development/.

Now I'm using Next.js and I could use fetch function directly to get data from back-end, but if possible would like to use next-connect as this module has many features that would simplify coding for my current project.

I tried several ways like rewriting path using rewrites module;

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

but still couldn't solve the problem. How should I go about it?

Thank you.

Answer 1

You can use NextJs internal API route, https://nextjs.org/docs/api-routes/introduction Using this you can map the requests coming from FE to Nextjs API endpoint and then it will be forwarded to actual backend service.

But if your all api calls are in server then, its not required to mask it. For client side calls you can do it