Rename /api route ?

[rvitre]

Hello dear community,

I know this might be a hard no, but hear me out.

The situation is my Next.js app sits next to a an other app that's already using /api and I cannot change that.
Any way to tell Next.js to use an other route name ?

In an act of despair, I tried using a normal page and use getInitialProps to perform my server-side call and output it raw in the render method, but of course it's nasty, not maintainable, has poor performances and is pretty stupid.

I tried to search on this topic but couldn't find much really.

Thanks a lot :)

[jamesmosier]

Unfortunately the /api route name is not changeable currently.

Depending on your proxy setup, you could "whitelist" the API routes associated with Next while your other API handles the other routes.

[samuelgoff]

hey @kachkaev I appreciate the response, however I don't think you understand the blast radius this has to an existing system, where developers may not have control over other systems being hosted on the same domain. The rule for enterprises and adopting new technology is gradual adoption -- and another requirement is "first, do no harm". What you're describing actively does harm to any existing system that leaves an /api surface in place.

What you're describing assumes that NextJS is the ONLY thing listening and responding at that path. As I described above, I'm in an environment where an existing set of microservices already live at /api outside of my NextJS app. Other non-UI clients (other devices & microservices) need to continue to talk to those existing /api endpoints without my NextJS app jumping into the conversation and responding with "404 Not Found".

I need to configure NextJS to just ignore those endpoint requests entirely, not respond at all. Also, I need to be able to ignore everything at /api, not explicitly carve out exceptions, as that creates a maintainability nightmare. There is an existing huge & constantly evolving API surface that I would have to move in lockstep with (tightly-coupled), rather than being able to setup my own API endpoints in a complete separate path and choose if and when to migrate to.

[kachkaev]

I see. We'll that’s another topic. If you need certain API routes to be redirected to a third-party service, you can still use rewrites, just differently: https://stackoverflow.com/a/65467719/1818285. Your specific case may look different but hope it helps.

[samuelgoff]

hey @kachkaev this is NOT another topic. That Stack Overflow example would actually make things worse, because it will still continue to respond to /api traffic and mangle the responses, instead of leaving them completely alone, untouched. It seems the assumption on your side is that NextJS is the ONLY system routing traffic within a domain, which is a huge assumption for an enterprise environment. We already have existing proxies & microservices handling traffic at /api, and we need to get NextJS to ignore that traffic completely, and instead pay attention to a completely different route for API responses.

[ben-denzer]

Hi @samuelgoff - I have the same issue, and I have come up with a solution. In my Next.js api folder, I have made a sub folder - api/nextRoutes. The next part will be dependent on your webserver setup, but I use NGINX and it looks like this (every setup is pretty unique, so copy/paste is not advised even if you're using NGINX)

        # requests to /api/nextRoutes are routed to the Next.js app

        location /api/nextRoutes/ {
                try_files $uri @mainsite;
        }


        # any other requests to /api/* still go to their original destination

        location /api/ {
                proxy_pass http://127.0.0.1:3009;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

[OZZlE]

@kachkaev @ben-denzer You guys are all missing the point.. Me and @samuelgoff are in the situation where www.website.com/api/ is reserved by another application and we cannot control anything with that. You can't add a redirect if you have no control over it. We have to lead traffic to somewhere else.

My solution below does that although it's probably a hack and not sure how future proof it is.. Hopefully it is resolved properly by Next.js team soon in the future.

[OZZlE]

This is kind of a hack I guess but it works perfectly with next@13.2.4 as far as I've seen, based on https://nextjs.org/docs/pages/building-your-application/configuring/custom-server but modified:

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV === 'development';
const hostname = 'localhost';
const port = process.env.PORT || process.env.port || 3000;
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;

      if (pathname.indexOf('/nextapi/') !== -1) { // --------------------- START: solution ==>
        const newPath = pathname.replace('/nextapi/', '/api/');
        const newParsedUrl = {
          ...parsedUrl,
          pathname: newPath,
        }
        await handle(req, res, newParsedUrl);
      } else { // <=============================================== END: solution
        await handle(req, res, parsedUrl);
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err);
      res.statusCode = 500;
      res.end('internal server error');
    }
  })
    .once('error', (err) => {
      console.error(err);
      process.exit(1);
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`);
    });
});

[OZZlE]

so when using this you use /nextapi/x instead of /api/x

[OZZlE]

unfortuneatly this doesn't work in development ofc.. will write if I figure out a solution to that

[OZZlE]

const isDevelopment = process.env.NODE_ENV === 'development' || window.location.href.indexOf('localhost') !== -1;
const apiBasePath = isDevelopment ? `/api` : `/nextapi`;

[kachkaev]

With the new app router, you can create API handlers anywhere you want: https://nextjs.org/docs/app/building-your-application/routing/router-handlers

[OZZlE]

I get some weird error doing that

node_modules/formidable/src/PersistentFile.js:5:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/formidable/src/index.js
./src/pages/nextapi/sendMail/route.ts

119793:106 ./node_modules/nodemailer/lib/fetch/index.js:10:0
Module not found: Can't resolve 'net'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/nodemailer/lib/nodemailer.js
./src/pages/nextapi/sendMail/route.ts

119793:106 ./node_modules/nodemailer/lib/mailer/index.js:14:0
Module not found: Can't resolve 'dns'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/nodemailer/lib/nodemailer.js
./src/pages/nextapi/sendMail/route.ts

node_modules/nodemailer/lib/smtp-connection/index.js:6:0
Module not found: Can't resolve 'tls'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/nodemailer/lib/smtp-pool/index.js
./node_modules/nodemailer/lib/nodemailer.js
./src/pages/nextapi/sendMail/route.ts

[hassanpasha5630]

How can we use nextauth with this I have my fastapi in the root folder but seem like the root folder overlaps with the pages/api what nextauth looks for

[TomasSestak]

cant rewrites be used for this?