mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Based on feedback from https://github.com/vercel/next.js/issues/47793, I made some improvements around the geolocation docs. Specifically around `request.ip`, `request.geo`, and how to access these values. I noticed there was a bit of a divergence, as some of the `NextRequest` and `NextResponse` docs were split out for the App Router section, but not all. This PR finishes that swing by removing the previous catch-all for `next/server` in the Pages Router docs and splits them into individual docs pages. Wrote a lil' thread about this: https://twitter.com/leeerob/status/1736543599339172121 --------- Co-authored-by: Delba de Oliveira <[email protected]>
128 lines
4.4 KiB
Plaintext
128 lines
4.4 KiB
Plaintext
---
|
|
title: headers
|
|
description: API reference for the headers function.
|
|
---
|
|
|
|
The `headers` function allows you to read the HTTP incoming request headers from a [Server Component](/docs/app/building-your-application/rendering/server-components).
|
|
|
|
## `headers()`
|
|
|
|
This API extends the [Web Headers API](https://developer.mozilla.org/docs/Web/API/Headers). It is **read-only**, meaning you cannot `set` / `delete` the outgoing request headers.
|
|
|
|
```tsx filename="app/page.tsx" switcher
|
|
import { headers } from 'next/headers'
|
|
|
|
export default function Page() {
|
|
const headersList = headers()
|
|
const referer = headersList.get('referer')
|
|
|
|
return <div>Referer: {referer}</div>
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/page.js" switcher
|
|
import { headers } from 'next/headers'
|
|
|
|
export default function Page() {
|
|
const headersList = headers()
|
|
const referer = headersList.get('referer')
|
|
|
|
return <div>Referer: {referer}</div>
|
|
}
|
|
```
|
|
|
|
> **Good to know**:
|
|
>
|
|
> - `headers()` is a **[Dynamic Function](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions)** whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into **[dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)** at request time.
|
|
|
|
### API Reference
|
|
|
|
```tsx
|
|
const headersList = headers()
|
|
```
|
|
|
|
#### Parameters
|
|
|
|
`headers` does not take any parameters.
|
|
|
|
#### Returns
|
|
|
|
`headers` returns a **read-only** [Web Headers](https://developer.mozilla.org/docs/Web/API/Headers) object.
|
|
|
|
- [`Headers.entries()`](https://developer.mozilla.org/docs/Web/API/Headers/entries): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing to go through all key/value pairs contained in this object.
|
|
- [`Headers.forEach()`](https://developer.mozilla.org/docs/Web/API/Headers/forEach): Executes a provided function once for each key/value pair in this `Headers` object.
|
|
- [`Headers.get()`](https://developer.mozilla.org/docs/Web/API/Headers/get): Returns a [`String`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) sequence of all the values of a header within a `Headers` object with a given name.
|
|
- [`Headers.has()`](https://developer.mozilla.org/docs/Web/API/Headers/has): Returns a boolean stating whether a `Headers` object contains a certain header.
|
|
- [`Headers.keys()`](https://developer.mozilla.org/docs/Web/API/Headers/keys): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all keys of the key/value pairs contained in this object.
|
|
- [`Headers.values()`](https://developer.mozilla.org/docs/Web/API/Headers/values): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all values of the key/value pairs contained in this object.
|
|
|
|
### Examples
|
|
|
|
#### Usage with Data Fetching
|
|
|
|
`headers()` can be used in combination with [Suspense for Data Fetching](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating).
|
|
|
|
```jsx filename="app/page.js"
|
|
import { Suspense } from 'react'
|
|
import { headers } from 'next/headers'
|
|
|
|
async function User() {
|
|
const authorization = headers().get('authorization')
|
|
const res = await fetch('...', {
|
|
headers: { authorization }, // Forward the authorization header
|
|
})
|
|
const user = await res.json()
|
|
|
|
return <h1>{user.name}</h1>
|
|
}
|
|
|
|
export default function Page() {
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<User />
|
|
</Suspense>
|
|
)
|
|
}
|
|
```
|
|
|
|
#### IP Address
|
|
|
|
`headers()` can be used to get the IP address of the client.
|
|
|
|
```jsx filename="app/page.js"
|
|
import { Suspense } from 'react'
|
|
import { headers } from 'next/headers'
|
|
|
|
function IP() {
|
|
const FALLBACK_IP_ADDRESS = '0.0.0.0'
|
|
const forwardedFor = headers().get('x-forwarded-for')
|
|
|
|
if (forwardedFor) {
|
|
return forwardedFor.split(',')[0] ?? FALLBACK_IP_ADDRESS
|
|
}
|
|
|
|
return headers().get('x-real-ip') ?? FALLBACK_IP_ADDRESS
|
|
}
|
|
|
|
export default function Page() {
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<IP />
|
|
</Suspense>
|
|
)
|
|
}
|
|
```
|
|
|
|
In addition to `x-forwarded-for`, `headers()` can also read:
|
|
|
|
- `x-real-ip`
|
|
- `x-forwarded-host`
|
|
- `x-forwarded-port`
|
|
- `x-forwarded-proto`
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | --------------------- |
|
|
| `v13.0.0` | `headers` introduced. |
|