How do I route a subdomain to a NextJs route

Question

I have a NextJs app with 2 routes (/ and /blog) configured as:

• pages/index.tsx
• pages/blog/index.tsx

When I deploy them on vercel, everything works fine but I want to have a subdomain for /blog like blog.example.com. So whenever an user goes to blog.example.com, I want to redirect them to example.com/blog. So in my registrar I added blog as cname and in my vercel, I added that subdomain. But the problem is vercel doesn't show any options for this redirection. It only allows redirections to other domains or to a different git branch but not to a domain with a route.

Basically I want to route blog.example.com to example.com/blogon my vercel config. But Vercel doesn't allow me to add a route along with the domain.

In my registrar, my dns is configured as following:

example.com       A      <some ip>
blog.example.com  CNAME  cname.vercel-dns.com.
www.example.com   CNAME  cname.vercel-dns.com.

So what are my options? I know I can just create 2 different projects, one for / and one for /blog and use monorepos but it seems like an overkill as my / webpage is very simple.

Edit: Found an answer where they suggest using wildcard domains on vercel and then in the NextJs app, parsing the url, and then doing the redirection... which is fine, I guess. But it seems a bit hacky? Shouldn't this redirection logic be done in the cloud management side and not within my webapp?

Answer 1

So looks like I was approaching it from the wrong end. The registrar, in my case google domains, allows domain forwarding. So I removed my sub domain from the cname and added it here. Problem solved.