4

I have been trying to get Rewrites working in NextJS for my API Paths. It was to avoid CORS issues.

I followed the solution from: NextJs CORS issue.

It is working on localhost but does not work in a production environment (I was deploying on Vercel itself).

I basically tried with all the types of rewrites:

async rewrites() {
    return {
      beforeFiles: [
        {
          source: "/api/:path*",
          destination: `https://example.com/api/v1/:path*`,
          basePath: false,
        },
      ],
      afterFiles: [
        {
          source: "/api/:path*",
          destination: `https://example.com/api/v1/:path*`,
          basePath: false,
        },
      ],
      fallback: [
        {
          source: "/api/:path*",
          destination: `https://example.com/api/v1/:path*`,
          basePath: false,
        },
      ],
    };
  },

This rewrite works on localhost but on production, the rewrite stops working and the API calls go to /api/:path* itself.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Y M
  • 2,105
  • 1
  • 22
  • 44
  • I'm not able to replicate the issue. Are you certain it's not hitting the rewrite destination but failing for some other reason? Does the same happen if you use [`rewrites` in `vercel.json`](https://vercel.com/docs/cli#project-configuration/rewrites) instead? – juliomalves Sep 07 '21 at 17:43
  • I added the rewrites on `next.config.js` file. Did not add it in `vercel.json`. – Y M Sep 08 '21 at 06:56
  • I realise that - I was suggesting adding it to `vercel.json` to verify the issue can still be replicated. – juliomalves Sep 08 '21 at 07:28
  • I tried that as well, didn't work. – Y M Sep 13 '21 at 07:04

1 Answers1

6

The /api path is reserved for their Serverless Functions. Changing the source path to something else would resolve the issue.

KenRoda
  • 76
  • 1
  • 2