Next.js：如何获取middleware.js提供的地理位置信息？

根据你提供的中间件实现（通过URL查询参数传递country），以下是不同场景下的获取方法：

1. 服务器组件（Server Components） #

服务器组件可直接通过内置的searchParams props读取：

// app/page.js
export default function Home({ searchParams }) {
  const country = searchParams.country || '未知'
  return <div>当前地区：{country}</div>
}

searchParams是Next.js自动传递给服务器组件的参数，无需额外引入依赖。

2. 客户端组件（Client Components） #

客户端组件需使用next/navigation提供的useSearchParams钩子：

// app/client-page.js
'use client'

import { useSearchParams } from 'next/navigation'

export default function ClientPage() {
  const searchParams = useSearchParams()
  const country = searchParams.get('country') || '未知'
  return <div>当前地区：{country}</div>
}

注意必须添加'use client'指令，声明这是客户端组件。

3. API路由 #

在API路由中，直接从请求对象的nextUrl.searchParams提取：

// app/api/geo-info/route.js
export function GET(request) {
  const country = request.nextUrl.searchParams.get('country') || '未知'
  return Response.json({ country })
}

可选：通过请求头传递（更隐蔽） #

如果不想把地区参数暴露在URL中，可修改中间件将信息存入自定义请求头：

// /middleware.js
import { NextResponse } from 'next/server'

export function middleware(req) {
  const country = req.geo.country || 'DE'
  const response = NextResponse.next()
  response.headers.set('x-country', country)
  return response
}

之后在服务器组件或API路由中读取请求头：

// 服务器组件示例
import { headers } from 'next/headers'

export default function Home() {
  const headersList = headers()
  const country = headersList.get('x-country') || '未知'
  return <div>当前地区：{country}</div>
}

内容的提问来源于stack exchange，提问作者mhoev