Redirect URL in Vercel DNS

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!

Vercel Staff

Hi . 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.

Thank you for your response , I'll check out those options!

How would I do the:

... direct your subdomains to other sites using DNS records.

Thanks!

reply to #2

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

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!

This topic is closed. It no longer accepts new replies.

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

// 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;