Next.js处理页面/API路由作为客户端组件?

Question

我有一个简单的API路由，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();
res.status(200).end((user) ? 'yes' : 'no')
}

导入，../../lib/session(' src/lib/session.ts):

import { cookies } from 'next/headers';
import jwt from 'jsonwebtoken'
export const getSession = () => {
const nxtCookies = cookies();
if (nxtCookies.has('wp_session')) {
const cookie = nxtCookies.get('wp_session');
// prints on the server
console.log('this is happening on the server')
let sessionData = jwt.verify(cookie.value, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
if (err) return false;
return user;
});
if (sessionData) return sessionData;
}
return false;
}

当我尝试从pages/api/me.ts调用getSession()时，我得到一个错误:

。/src/lib/session.ts

你正在导入一个需要next/headers的组件。那只会管用在服务器组件中，但它的父组件之一被标记为"useClient "，所以它是客户端组件。

import {cookies} from 'next/headers';:

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

其中一个用"use client":
srclibsession"标记为客户端条目。ts src api页面 me.ts

这怎么可能?都是服务器端代码。

我甚至有一个服务器组件，使用getSession()在网站上显示用户信息，这个错误没有被抛出。我甚至通过console.log验证了在该组件和getSession()中，控制台打印到服务器控制台。所以我不确定这是怎么可能的。

具体来说，这里的问题似乎是cookie从next/headers导入。

Answer 1

我相信来自next/headers的cookie只有用于服务器组件。src/pages/api/me.ts在服务器上，但不是服务器组件。

您可以通过req.cookies访问请求中的cookie，并将其传递给getSession函数。

一个可能的实现是:

// src/pages/api/me.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { getSession } from '../../lib/session'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
const user = getSession(req.cookies);
res.status(200).end((user) ? 'yes' : 'no');
}

// src/lib/session.ts
import jwt from 'jsonwebtoken';
export const getSession = (cookies: Partial<Record<string, string>>) => {
const session = cookies.wp_session;
if (session) {
// prints on the server
console.log('this is happening on the server');
const sessionData = jwt.verify(session, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
if (err) return false;
return user;
});
return sessionData;
}
}