save key in http header

[obtuse forge]

how can i save an value in the http header. in typescript

[slender gull]

Hi @obtuse forge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, you can set HTTP headers in several ways. Here are a few examples:

1. Using NextResponse in Middleware: You can set request and response headers using the NextResponse API in your middleware. Here's an example:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
 // Clone the request headers and set a new header `x-hello-from-middleware1`
 const requestHeaders = new Headers(request.headers)
 requestHeaders.set('x-hello-from-middleware1', 'hello')
 
 // You can also set request headers in NextResponse.rewrite
 const response = NextResponse.next({
 request: {
 // New request headers
 headers: requestHeaders,
 },
 })
 
 // Set a new response header `x-hello-from-middleware2`
 response.headers.set('x-hello-from-middleware2', 'hello')
 return response
}

Source (https://nextjs.org/docs/app/building-your-application/routing/middleware)

2. Using headers key in next.config.js: You can set custom HTTP headers using the headers key in next.config.js. Here's an example:

module.exports = {
 async headers() {
 return [
 {
 source: '/about',
 headers: [
 {
 key: 'x-custom-header',
 value: 'my custom header value',
 },
 {
 key: 'x-another-custom-header',
 value: 'my other custom header value',
 },
 ],
 },
 ]
 },
}

Source (https://nextjs.org/docs/app/api-reference/next-config-js/headers)

3. Using headers in Route Handlers: You can read headers with headers from next/headers in a Route Handler. To set headers, you need to return a new Response with new headers.

import { headers } from 'next/headers'
 
export async function GET(request: Request) {
 const headersList = headers()
 const referer = headersList.get('referer')
 
 return new Response('Hello, Next.js!', {
 status: 200,
 headers: { referer: referer },
 })
}

Source (https://nextjs.org/docs/app/building-your-application/routing/router-handlers)

Remember to avoid setting large headers as it might cause a 431 Request Header Fields Too Large (https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/431) error depending on your backend web server configuration.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: