I have 2 domains configured on vercel. I want the following url www.secondary-domain to show the contents of www.primary-domain/about. I also want www.primary-domain/about to redirect to www.secondary-domain

I tried the following but having no success, infinite rewrite loop error

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/',
        destination: ''
      }
    ]
  },
  async redirects() {
    return [
      {
        source: '/about',
        destination: '',
        permanent: true
      }
    ]
  }
}

module.exports = nextConfig

I have 2 domains configured on vercel. I want the following url www.secondary-domain to show the contents of www.primary-domain/about. I also want www.primary-domain/about to redirect to www.secondary-domain

I tried the following but having no success, infinite rewrite loop error

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/',
        destination: 'https://www.primary-domain/about'
      }
    ]
  },
  async redirects() {
    return [
      {
        source: '/about',
        destination: 'https://www.secondary-domain',
        permanent: true
      }
    ]
  }
}

module.exports = nextConfig

• next.js
• url-rewriting
• vercel

• Have you ever tried <iFrame>? tutorialrepublic/html-tutorial/…. – Reza Attar Commented Nov 22, 2024 at 10:10

1 Answer 1

I don't have a Vercel account, but it seems you are currently using next.config.js for your configuration. In this case, you should use the vercel.json file to define the redirect and rewrite rules.

You can try the following configuration, utilizing the has property to achieve your desired behavior:

{
  "rewrites": [
    {
      "source": "/",
      "destination": "https://www.primary-domain/about",
      "has": [
        { "type": "host", "value": "www.secondary-domain" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/about",
      "destination": "https://www.secondary-domain",
      "permanent": true,
      "has": [
        { "type": "host", "value": "www.primary-domain" }
      ]
    }
  ]
}

Explanation:

• Rewrites:

  • When a request is made to www.secondary-domain, the rewrite rule will serve the content from https://www.primary-domain/about.
  • The "has" field ensures this rule only applies to requests coming from the www.secondary-domain domain.

• Redirects:

  • When a request is made to www.primary-domain/about, it will redirect permanently (301) to https://www.secondary-domain.
  • The "has" field ensures the redirect is domain-specific, so it avoids triggering for the secondary domain.

Key Notes:

• The rewrites and redirects use has conditions to distinguish between the two domains, avoiding infinite loops.
• Make sure both domains are correctly configured and linked to your Vercel project.
• Clear your browser cache or test in incognito mode to ensure old redirect rules don’t interfere with your testing.