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;
}

当我尝试从

getSession()

调用

pages/api/me.ts

时，出现错误：

./src/lib/session.ts

您正在导入需要 next/headers 的组件。这只有效 在服务器组件中，但其父组件之一标记为“use client”，所以它是一个客户端组件。

从“next/headers”导入{cookies}； :

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

其中一个被标记为带有“use client”的客户端条目：
src\lib\session.ts src\pages pi\me.ts

这怎么可能？两者都是服务器端代码。

我什至有一个服务器组件，使用

getSession()

在网站上显示用户信息，并且不会抛出此错误。我什至通过

console.log

验证了该组件和

getSession()

中控制台是否打印到服务器控制台。所以我不确定这怎么可能。

具体来说，这里的问题似乎是

cookie

从

next/headers

导入。

Answer 1

我相信 next/headers 中的

cookies

仅可用于服务器组件。

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;
  }
}

Answer 2

我也遇到这个问题了。我在客户端组件中嵌套了一个服务器函数（使用“next/headers”）。所以每当我调用这个组件时，它总是会带来这个错误。 我发现的修复方法是附加

“使用服务器”

这是在导入“next/headers”之前添加到服务器功能中的

"use server";
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;
}