Use Next.js middleware to forward data to the Log visit endpoint.

In Next.js, Middleware allows you to run code before a request is completed. Read the official documentation for more details.

​
Setup

  1. Set up the HALL_API_KEY environment variable with your Hall API key.
  2. Create a middleware.ts file in your Next.js project root to implement the analytics middleware.

​
Example

The example below demonstrates how to forward data from Next.js headers function.

middleware.ts
import { NextRequest, NextResponse } from 'next/server'

export async function middleware(request: NextRequest) {
  const requestPath = request.nextUrl.pathname + request.nextUrl.search
  const requestMethod = request.method
  const requestIp = 
    request.headers.get('x-forwarded-for')?.split(',')[0] ||
    request.headers.get('x-real-ip') ||
    request.ip ||
    '127.0.0.1'

  const requestHeaders = {
    'User-Agent': request.headers.get('user-agent'),
    'Host': request.headers.get('host'),
    'Referer': request.headers.get('referer'),
  }

  fetch('https://analytics.usehall.com/visit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.HALL_API_KEY}`,
    },
    body: JSON.stringify({
      request_path: requestPath,
      request_method: requestMethod,
      request_ip: requestIp,
      request_headers: requestHeaders,
      request_timestamp: Date.now()
    }),
  })

  return NextResponse.next()
}
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}