NextJS Subdirectory Setup

If using NextJS, it's possible to setup a reverse proxy using a custom NextJS configuration file, to establish a subdirectory on Ghost(Pro).

For this configuration to work successfully, you must be on a Business plan with a subdirectory enabled. You must also paste the exact configuration below into your netlify.toml file, updating the values to match your ghost.io subdomain and custom domain, so that it meets our reverse proxy rules.

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,
  async rewrites() {
    return [     
      {
        source: "/blog/:path*/",
        destination: "https://<subdomain>.ghost.io/blog/:path*/",
      },
      {
        source: "/blog/:path*",
        destination: "https://<subdomain>.ghost.io/blog/:path*",
      }    
    ];
  },
  async headers() {
    return [
      {
        source: "/blog/:path*",
        headers: [{ key: "x-forwarded-host", value: "your-custom-domain.com" }],
      }
    ];
  }
}

module.exports = nextConfig