Serve a Static App Under /blog

[mwood23]

I'm working on a web app that uses Next.js deployed to Vercel, but for the blog it uses Gatsby. What I want is to have the Gatsby blog served from /blog. I've tried a variety of combinations and can't seem to figure it out. I think there's two main options:

1. Place static app into /public directory
2. Serve static app separately and use the experimental rewrites feature

For option 1 this is what I did:
Built Gatsby with gatsby build --prefix-paths. That builds Gatsby so that it knows it's going to be served from /blog instead of the root. When I ran gatsby serve everything works as expected serving content from /blog.

// gatsby-config.js
module.exports = {
  pathPrefix: `/blog`,
}

Then, I moved that build into my Next.js project under /public/blog. When I ran next serve locally it would render only if I navigated directly to the html file /blog/index.html and then it would correctly infer the trailing slash when clicking around. If I went to /blog/ or /blog it would 404. When I deployed like this none of it worked on Vercel.

For option 2 this is what I did:
I built Gatsby prefixing the paths like before, hosted my static website on a subdomain, and placed this in my next.config.js file:

      experimental: {
        async rewrites() {
          return [
            {
              source: '/blog/:path*/', // also tried /blog/:path*
              destination: 'https://blog.someurl.com/blog/:path*',
            },
          ]
        },
      },

I could get access stuff from /blog (not /blog/ oddly enough) but it didn't appear any other paths were rewriting. For example blog/article or /blog/authors/author. I tried a variety of syntaxes but couldn't get the full path to rewrite.

The docs steer you away from a custom server, but in this case is it the only way I can fix this?