Next.js 13 app目录下如何获取middleware.js中设置的变量？

在Next.js 13的App Router体系下，next/router的API已经不再适用，取而代之的是next/navigation中的新路由工具。针对你的场景，有两种方案可以获取middleware注入的查询参数：

1. 客户端组件中获取（使用useSearchParams） #

如果你的页面是客户端组件（需要交互或依赖客户端API），需要先添加'use client'指令，然后使用useSearchParams钩子来读取查询参数：

'use client'
import { useSearchParams } from 'next/navigation'

export default function HomePage() {
  const searchParams = useSearchParams()
  // 获取city参数，默认值设为你的兜底值
  const city = searchParams.get('city') || 'San Francisco'
  // 解码参数（和你之前在Pages Router中的处理一致）
  const decodedCity = decodeURIComponent(city)

  return <div>City: {decodedCity}</div>
}

2. 服务器组件中获取（直接接收searchParams参数） #

如果你的页面不需要客户端交互，推荐用服务器组件来获取参数，这样可以在服务端直接处理，更高效：

export default function HomePage({ searchParams }: { searchParams: { city?: string } }) {
  const city = searchParams.city || 'San Francisco'
  const decodedCity = decodeURIComponent(city)

  return <div>City: {decodedCity}</div>
}

注意事项 #

• 不要混用next/router和next/navigation的API，App Router只支持后者的路由工具
• 服务器组件不需要任何钩子，直接通过组件props接收searchParams即可，这是App Router原生支持的特性
• 保持你在middleware中的逻辑不变，参数依然会被注入到URL的查询串中，两种方案都能正确读取到

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