Next.js Discord

Discord Forum

SOLVED: rewrites external url not working on Vercel but works on local.

Unanswered
Streak-backed Oriole posted this in #help-forum
Open in Discord
Streak-backed OrioleOP
I have 2 Vercel deployments and am trying to rewrite one to another using external url method.

Everything works fine on local. I can even have project 1 on local and project 2 be deployed to vercel and it will work as attended.

When I test with both project deployed on vercel I get blank page with ERR_TOO_MANY_REDIRECTS.

6 Replies

Streak-backed OrioleOP
Is there a limit to the number of external url rewrites?
Streak-backed OrioleOP
/** @type {import('next').NextConfig} */
const {
  PRO1_URL = 'https://project1.vercel.app/',
  PRO2_URL = 'https://project2.vercel.app/',
  PRO3_URL = 'https://project3.vercel.app/',
} = process.env
const nextConfig = {
  reactStrictMode: true,
  basePath: "",
  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
      os: false,
      path: false,
      stream: false,
    };

    return config;
  },
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: `/:path*`,
      },
      // PROJECT 1
      {
        source: '/first',
        destination: `${SOL_URL}/first`,
      },
      {
        source: '/first/:path*',
        destination: `${PRO1_URL}/first/:path*`,
      },
      // PROJECT 2
      {
        source: '/second',
        destination: `${PRO2_URL}/second`,
      },
      {
        source: '/second/:path*',
        destination: `${PRO2_URL}/second/:path*`,
      },
      // PROJECT 3
      {
        source: '/third',
        destination: `${PRO3_URL}/third`,
      },
      {
        source: '/third/:path*',
        destination: `${PRO3_URL}/third/:path*`,
      },
    ]
  },
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
};

module.exports = nextConfig;
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  trailingSlash: true,
  basePath: "/first",
  images: {
    domains: ["gateway.ipfscdn.io", "i.seadn.io", "ipfs.io"],
  },
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
};

module.exports = nextConfig;
Streak-backed OrioleOP
solved it. process.env wasn't running. removed the process and place the actual url in sting like so:
      // PROJECT 1
      {
        source: '/first',
        destination: `https://project1.vercel.app//first`,
      },
      {
        source: '/first/:path*',
        destination: `https://project1.vercel.app//first/:path*`,
      },
also remove trailngSlash: true from all secondary projects config files