Next.js为何将pages/API路由识别为客户端组件？

错误原因 #

你在Pages Router的API路由（src/pages/api/me.ts）里，使用了属于App Router专属的next/headers模块的cookies()方法。虽然代码确实运行在服务端，但Pages Router的API路由有独立的请求上下文获取逻辑，next/headers的cookies()仅支持在App Router的服务端组件、服务器动作中使用，Pages Router环境下会触发兼容性错误。

解决方案 #

调整getSession函数，让它同时兼容Pages Router API路由（通过传入NextApiRequest获取Cookie）和App Router服务端组件（使用next/headers）的场景：

修改后的src/lib/session.ts #

import { cookies } from 'next/headers';
import jwt from 'jsonwebtoken'
import type { NextApiRequest } from 'next'

export const getSession = (req?: NextApiRequest) => {
    let cookieValue: string | undefined;

    // 适配Pages Router API路由：从请求对象获取Cookie
    if (req) {
        cookieValue = req.cookies.wp_session;
    } else {
        // 适配App Router服务端组件：使用next/headers获取Cookie
        const nxtCookies = cookies();
        cookieValue = nxtCookies.get('wp_session')?.value;
    }

    if (cookieValue) {
        console.log('this is happening on the server')
        let sessionData = jwt.verify(cookieValue, process.env.ACCESS_TOKEN_SECRET!, (err, user) => {
            if (err) return false;
            return user;
        });

        if (sessionData) return sessionData;
    }

    return false;
}

修改后的src/pages/api/me.ts #

import { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from '../../lib/session'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    let user = getSession(req); // 传入API路由的请求对象
    res.status(200).end(user ? 'yes' : 'no')
}

说明 #

修改后，getSession可以在两种场景下正常工作：

• App Router服务端组件调用时，直接使用getSession()（无参数）
• Pages Router API路由调用时，传入req参数获取Cookie

这样就能彻底解决你遇到的兼容性错误。

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