Next.js 13：中间件返回的JSON如何在服务端组件中使用？

你遇到的问题本质是：NextResponse.json()会直接返回JSON格式的响应，终止后续的路由渲染流程，导致服务端组件根本不会被执行，自然无法获取数据。下面提供两种实用的解决方案：

方案一：通过自定义请求头传递数据（推荐，适合敏感数据） #

中间件中把JSON数据转为字符串，存入自定义请求头，服务端组件从请求头中读取并解析：

middleware.ts 代码示例 #

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

export function middleware(request: NextRequest) {
  // 定义要传递的JSON数据
  const payload = { userId: 123, userName: 'gndy Br', isAuthenticated: true }
  
  // 创建继续路由的响应，而非直接返回JSON
  const response = NextResponse.next()
  // 将JSON转为字符串存入自定义请求头（前缀X-符合HTTP规范）
  response.headers.set('X-Middleware-Payload', JSON.stringify(payload))
  
  return response
}

服务端组件（如page.tsx）代码示例 #

import { headers } from 'next/headers'

export default async function HomePage() {
  const headerList = headers()
  // 读取请求头中的数据
  const payloadStr = headerList.get('X-Middleware-Payload')
  // 解析为JSON对象
  const payload = payloadStr ? JSON.parse(payloadStr) : null

  return (
    <div>
      <h2>服务端组件获取中间件数据</h2>
      {payload && (
        <pre style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
          {JSON.stringify(payload, null, 2)}
        </pre>
      )}
    </div>
  )
}

方案二：通过URL参数传递数据（适合非敏感数据） #

如果数据不敏感，可以将JSON转为Base64编码后作为URL参数传递，避免URL编码问题：

middleware.ts 代码示例 #

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

export function middleware(request: NextRequest) {
  const payload = { userId: 123, userName: 'gndy Br', isAuthenticated: true }
  // 将JSON转为Base64编码
  const encodedPayload = btoa(JSON.stringify(payload))
  
  // 修改当前URL的查询参数
  const targetUrl = new URL(request.url)
  targetUrl.searchParams.set('middleware-data', encodedPayload)
  
  // 重写URL并继续路由
  return NextResponse.rewrite(targetUrl)
}

服务端组件（如page.tsx）代码示例 #

import { searchParams } from 'next/headers'

export default async function HomePage() {
  const params = searchParams()
  const encodedPayload = params.get('middleware-data')
  const payload = encodedPayload ? JSON.parse(atob(encodedPayload)) : null

  return (
    <div>
      <h2>通过URL参数获取中间件数据</h2>
      {payload && (
        <pre style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
          {JSON.stringify(payload, null, 2)}
        </pre>
      )}
    </div>
  )
}

关键注意事项 #

1. 必须使用NextResponse.next()或NextResponse.rewrite()来继续路由流程，不能用NextResponse.json()直接返回，否则服务端组件不会被渲染。
2. 请求头方法不会暴露数据在URL中，更安全；URL参数方法适合简单、非敏感的数据传递。

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