you need to pass it from server component

As possible solutions:

If you have SSR mode in the app directory (dynamic='force-dynamic') or you are willing to give up static optimization, you can use the headers API - https://nextjs.org/docs/app/api-reference/functions/headers#headers and pass it as props to client components.


Otherwise, you can, for example, add a cookie in middleware.

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

export function middleware(request: NextRequest) {
    const response = NextResponse.next();
    const referer = request.headers.get('referer');
    if (referer) response.cookies.set('referer', referer);
    return response
}

Next, read it in client components.