Custom api routes using Next.js router

[cseas]

Feature request

Is your feature request related to a problem? Please describe.

One limitation with the api/ folder is that it requires you to have your api under /api. I'd like to define an API directly from the base url. I understand this is possible when using a custom server but I don't want to switch to a custom server since that would remove some performance optimizations that Next's internal router adds.

Describe the solution you'd like

Maybe it's possible to decide in each file whether it's a page or an api endpoint, like this:

// pages/index.js
import { api, page } from 'next'

// an api endpoint
export default api((req, res) => 'hello')

// a page
export default page((props) => 'hello')

Originally posted by @lucleray in #7297 (comment)

Or if we could just use the Next router to custom define the API endpoint, that would be great.

Describe alternatives you've considered

This example using Express seems to be the best alternative:
https://github.com/vercel/next.js/tree/canary/examples/custom-server-express

[Janpot]

@cseas You should be able to leverage the upcoming custom routes feature to achieve this:

  rewrites: () => [
    { source: '/my-api-route', destination: '/api/my-api-route' },
  ]

[kostia1st]

Not the best solution IMO, but it's the one working right here right now. Thanks.

[pratheekhegde]

@Janpot In your shared snippet will it forward all the query params too? Does it act as a proxy internally like http-proxy-middleware ?

[Janpot]

yes

[pratheekhegde]

Referring to the example here https://nextjs.org/docs/api-reference/next.config.js/rewrites#incremental-adoption-of-nextjs I'm trying to proxy /api/* routes of my Next App to a different backend endpoint hosted at https://myservice.com/api/*.

This is my config:

{
    async rewrites() {
      return [
        {
          source: "/api/:path*",
          destination: "https://myservice.com/api/:path*",
        },
      ];
    },
  }

The above configuration doesn't seem to be working. I don't know if I'm missing something. When I access http://localhost:3000/api/xyz I see that the proxied request is being changed to https://myservice.com/xyz?path=xyz. The proxied request doesn't have /api in it. I suspect this is happening because of :path* in the destination of my rewrite rule. How can I forward all /api/* to https://myservice.com/api/*?

[dsauna]

@pratheekhegde, were you able to figure this out?

[kostia1st]

Try settings basePath: false:

{
    async rewrites() {
      return [
        {
          source: "/api/:path*",
          destination: "https://myservice.com/api/:path*",
          basePath: false,
        },
      ];
    },
  }