> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usehall.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Integrate with Next.js middleware to send analytics data to Hall

Use Next.js middleware to forward data to the [Log visit](api-reference/visit) endpoint.

In Next.js, Middleware allows you to run code before a request is completed. Read the [official documentation](https://nextjs.org/docs/app/building-your-application/routing/middleware) for more details.

## Setup

1. Set up the `HALL_API_KEY` environment variable with your [Hall API key](/authorization).
2. Create a `middleware.ts` file in your [Next.js project root](https://nextjs.org/docs/app/building-your-application/routing/middleware) to implement the analytics middleware.

## Example

The example below demonstrates how to forward data from Next.js [headers](https://nextjs.org/docs/app/api-reference/functions/headers) function.

```ts middleware.ts theme={null}
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).*)'],
}
```