如何在Next.js App Router页面中获取request/response对象？

在App Router中确实移除了Pages Router里的getStaticProps这类函数，但针对不同运行场景，Next.js提供了对应的方式来获取请求相关信息：

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

服务器组件运行在服务端，可直接获取请求相关数据：

• 获取请求头与Cookie：使用Next.js内置的headers()和cookies()函数（仅能在服务器组件中调用），示例：

  import { headers, cookies } from 'next/headers';
  
  export default async function Page() {
    const headersList = headers();
    const cookieStore = cookies();
    const userAgent = headersList.get('user-agent');
    const theme = cookieStore.get('theme')?.value;
  
    return <div>用户代理：{userAgent}</div>;
  }
  

• 获取完整Request对象：在Server Actions中，可通过参数自动注入Request对象（Next.js 13.4+已稳定支持Server Actions）：

  'use server';
  
  export async function submitForm(formData: FormData, request: Request) {
    const origin = request.headers.get('origin');
    // 业务处理逻辑
  }
  

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

客户端组件运行在浏览器端，无法直接获取服务端的Request/Response对象，可通过两种方式间接获取所需信息：

• 由父级服务器组件将需要的请求数据（如用户代理、Cookie值等）作为props传递给客户端组件。
• 调用App Router下的API路由，在API路由中获取请求信息后返回给客户端组件。

3. API路由（App Router） #

在app/api/[path]/route.js格式的API路由中，处理函数可直接接收NextRequest和NextResponse对象，示例：

import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const requestUrl = request.nextUrl;
  const authHeader = request.headers.get('authorization');
  
  return NextResponse.json({ 
    路径: requestUrl.pathname,
    授权状态: authHeader ? '已携带' : '未携带'
  });
}

4. 中间件（Middleware） #

在项目根目录的middleware.js文件中，可拦截所有请求，直接获取NextRequest和NextResponse对象，用于路由守卫、修改请求/响应头等场景：

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/admin')) {
    const isAuth = request.cookies.has('admin_token');
    if (!isAuth) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }
  return NextResponse.next();
}

注意：服务器组件中无法直接操作Response对象（响应由Next.js统一处理），若需自定义响应，建议使用API路由或中间件。

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