Redirect URL in Vercel DNS

[donaldlouch]

Hello,

I have my domain name hosted on Vercel and I have a few (around 6 or so) sub domain names that redirect to other places such as youtube.domain.name will redirect to my YouTube account, or links.domain.name will redirect to pretty much my home page at domain.name#links.

Currently I have this done through separate projects with a next.config.js file with:

 const nextConfig = {

  async redirects() {
    return [
      {
        source: '/:slug*',
        destination: 'https://DOMAIN.NAME',
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

I was hoping that there’s an easier and cleaner way of doing this from the Vercel Dashboard where I don’t need additional projects and additional GitHub repos?

Thanks in advance!

[amyegan]

Hi @donaldlouch. It depends on your preferred domain and project configuration.

You could do all of the redirects from a single project with next.config.js (or vercel.json if not a Next.js project) and use the host value to redirect traffic.

Or you could do dynamic redirects using a Function or Middleware. That would give you the option to also use Edge Config for experimentation and fast reconfiguration of your redirects.

You could also direct your subdomains to other sites using DNS records.

[donaldlouch]

Thank you for your response @amyegan, I’ll check out those options!

How would I do the:

… direct your subdomains to other sites using DNS records.

Thanks!

[donaldlouch]

After some reviewing I have decided to go with the single project route with the next.config.js route with linked from:

@amyegan

host value

And it works! I used the code breakdown of:

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    async redirects() {
        return [
            {
                source: '/:slug*',
                has: [
                    {
                        type: 'host',
                        value: 'SUB1.DOMAIN.NAME',
                    },
                ],
                permanent: true,
                destination: 'GOTOLINK1',
            },
            {
                source: '/:slug*',
                has: [
                    {
                        type: 'host',
                        value: 'SUB2.DOMAIN.NAME',
                    },
                ],
                permanent: true,
                destination: 'GOTOLINK2',
            },
            {
                source: '/:slug*',
                has: [
                    {
                        type: 'host',
                        value: 'SUB3.DOMAIN.NAME',
                    },
                ],
                permanent: true,
                destination: 'GOTOLINK3WITHSLUG/:slug*',
            },
        ]
    }
};

export default nextConfig;

Thank you!