Using Next.js middleware as a reverse proxy

Note: If you are using the EU cloud then use eu instead of us in all domains (e.g. us.i.posthog.com -> eu.i.posthog.com)

If you are using Next.js and rewrites aren't working for you, you can write custom middleware to proxy requests to PostHog.

To do this using the app router, create a file named middleware.js in your base directory (same level as the app folder). In this file, set up code to match requests to a custom route, set a new host header, change the URL to point to PostHog, and rewrite the response.

JavaScript

import { NextResponse } from 'next/server'
 
export function middleware(request) {
  let url = request.nextUrl.clone()
  const hostname = url.pathname.startsWith("/ingest/static/") ? 'us-assets.i.posthog.com' : 'us.i.posthog.com'
  const requestHeaders = new Headers(request.headers)
  
  requestHeaders.set('host', hostname)

  url.protocol = 'https'
  url.hostname = hostname
  url.port = 443
  url.pathname = url.pathname.replace(/^\/ingest/, '');

  return NextResponse.rewrite(url, {
    headers: requestHeaders,
  })
}
 
export const config = {
  matcher: '/ingest/:path*',
}

Add the skipTrailingSlashRedirect option to your next.config.js file:

JavaScript

// next.config.js
const nextConfig = {
  // This is required to support PostHog trailing slash API requests
  skipTrailingSlashRedirect: true, 
}
module.exports = nextConfig

Once done, configure the PostHog client to send requests via your rewrite.

JavaScript

posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
  api_host: "/ingest",
  ui_host: "<ph_app_host>"
})

Questions?

Was this page useful?

Using Nuxt routeRules as a reverse proxy