next.js - Is it possible to both redirect and rewrite URLs in Next JS? - Stack Overflow

admin管理员组

文章数量:1023827

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

Share Improve this question Follow edited Nov 21, 2024 at 0:12 Burger Sasha asked Nov 19, 2024 at 0:05 Burger SashaBurger Sasha 17566 silver badges2424 bronze badges 1

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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

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

Share Improve this question Follow edited Nov 21, 2024 at 0:12 Burger Sasha asked Nov 19, 2024 at 0:05 Burger SashaBurger Sasha 17566 silver badges2424 bronze badges 1

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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： nextjsIs it possible to both redirect and rewrite URLs in Next JSStack Overflow