Redirect a Default Vercel Subdomain to Your Custom Domain

When launching a website on Vercel, setting up a custom domain is usually one of the final steps before you go live. However, what's not, perhaps, always obvious is that Vercel's default vercel.app subdomain carries on serving your website once your custom domain is connected.

For example, whilst building Linkudo, I set up linkudo.com as the primary domain, assuming that would be the only way to access the site. It became very clear very quickly that linkudo.vercel.app remained publicly accessible, effectively creating a duplicate version of the game.

Whilst this isn't necessarily a problem for everyone, it can lead to SEO issues around duplicate content. Search engines might struggle to determine which version should be ranked, potentially affecting visibility. Additionally, users could stumble upon the wrong URL and share it instead of your intended domain. Fortunately, the fix is simple, and Vercel provides a few different ways to handle it.

Option 1: Redirect Using Vercel's Dashboard

For possibly the quickest and simplest solution, look towards Vercel's dashboard, where you can handle this directly:

• Go to the Vercel Dashboard and open your project.
• Navigate to Settings → Domains.
• Find the default vercel.app subdomain.
• Click Edit and set it to redirect to your custom domain (yourdomain.com).
• Save the changes.

Being a domain‑level change, you should probably expect to wait a little while for the change to propagate fully, but in my experience, it is almost instantaneous. This is the easiest way to manage redirects if you don't want to touch code.

Option 2: Redirect Using vercel.json

If you'd rather define the redirect in code (perhaps for version control, or simply because you already have vercel.json set up), you can configure it in Vercel's vercel.json file. Include an explicit host condition so the rule matches only the default Vercel subdomain:

1. Open your project and create (or update) vercel.json in the root directory.
2. Add the following:

{  "redirects": [    {      "source": "/:path*",      "has": [        {          "type": "host",          "value": "yourproject.vercel.app"        }      ],      "destination": "https://yourdomain.com/:path*",      "permanent": true    }  ]}

After that, all you need to do is deploy and build.

Once deployed, requests whose host is yourproject.vercel.app will be permanently redirected to yourdomain.com. Requests already using the custom domain do not match the rule, which prevents a redirect loop.

However, there are a couple of minor things worth noting:

• The wildcard (:path*) ensures that all pages within the subdomain are also redirected ‑ make sure you include it unless there are specific paths you want to keep on the Vercel subdomain.
• In Vercel's redirects configuration, permanent: true produces a 308 response; permanent: false produces a temporary 307 response.

Option 3: Redirect Using Next.js Middleware

If you're using Next.js (and if you're hosting with Vercel, I would say chances are very high that you are), then you could also implement this redirect at the application level using middleware, renamed Proxy in Next.js 16. Use this only when the application needs route‑specific flexibility, and retain the same explicit source‑host check.

1. If you don't already have one, create a middleware.ts file in your project root (or _middleware.ts in pages/ for older Next.js versions).
2. Add this code:

import { NextResponse } from "next/server";export function middleware(req: Request) {  const url = new URL(req.url);  if (url.hostname === "yourproject.vercel.app") {    url.hostname = "yourdomain.com";    return NextResponse.redirect(url.toString(), 308);  }  return NextResponse.next();}

And then commit, deploy, and build.

This allows the application to redirect the default vercel.app host while leaving requests for the custom host alone. Test both hosts and a nested path before treating the rule as complete.

Wrapping Up

There are several different ways to manage redirects with Vercel, whether you prefer a dashboard setting, a JSON configuration, or a Next.js middleware solution.

• For a quick fix

  , use the Vercel dashboard (Option 1).

• For a version‑controlled approach

  , use the vercel.json file (Option 2).

• For more control

  , use Next.js middleware (Option 3).

If you're using Netlify, I've previously written a very similar article covering this same issue with the netlify.app default subdomains: "Redirect a Default Netlify Subdomain to Your Custom Domain".