how to get the client Ip address in app router?

[Arunjenson-ss]

how to get the client Ip address in app router?

[devjiwonchoi]

Take a look at https://next-js-playground-dusky.vercel.app/ and https://next-js-playground-dusky.vercel.app/api

Option 1 - By Route Handler

// route.ts

import { NextRequest, NextResponse } from 'next/server'

export async function GET(req: NextRequest) {
  const ip = (req.headers.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0]
  return NextResponse.json({ ip })
}

Option 2 - By Page Component

// page.tsx

import { headers } from 'next/headers'

export default function Home() {
  const header = headers()
  const ip = (header.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0]
  // ...
}

Basically, the method is to get x-forwarded-for from the headers.

Source

https://github.com/devjiwonchoi/next.js-playground/tree/main/app-router

Reference

• X-Forwared-For

[leerob]

Thank you for this!

[leerob]

Updated the docs here to make it more clear this depends on the infra provider, but you can also read some things from headers if provided: #59719

[IDJGILL]

request.geo is removed in Next 15.

[leerob]

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#nextrequest-geolocation

[callumfrance]

If you are using Vercel, you can alternatively use the geolocation and ipAddress functions from @vercel/functions instead

So, the recommended solution only caters to a Vercel deployment now that those properties were deprecated?

[leerob]

These properties have always required your infrastructure provider to look at the framework outputs and add the information. It was never possible for us to embed geolocation APIs into Next.js itself – it is provider specific.

[IDJGILL]

@leerob Make sense.