How to host a blog under a subdirectory using Vercel

I’ve recently been trying to add a blog to my existing NextJS website hosted on Vercel. If you want your blog to be indexed in search engine optimized (SEO) way, you might want to consider hosting it under a subdirectory like /blog rather than a subdomain like “blog.yourwebsite.com”. The only problem here is that it’s not easily possible to configure a subdirectory to point to a different Vercel site or a different server all together. And that’s where my journey started.

Turns out you can actually create two separate Vercel projects and sort of link them together. All this magic takes places in the vercel.json config file in the project root.

Let’s look at how this look in practice.

{
  "rewrites": [
    { "source": "/blog/:subdir*", "destination": "https://magicul-blog.vercel.app/:subdir*" },
    { "source": "/(.*)", "destination": "/" }
  ]
}

Seems pretty straight forward right. The rewrites section tells Vercel that the subdirectory/subpath /blog will be served from another Vercel app with the URL https://magicul-blog.vercel.app.

If you already have a vercel.json file in your project then make sure that you append this and keep all existing stuff in there.

You can potentially configure this to serve more than one directory to multiple different Vercel projects. Make sure that the last part with /(.*) stays there, because this makes sure that all traffic going to the normal sites does not get lost.