Next.js 13（Beta）SSR模式下如何获取Cookie调用API

核心思路 #

Next.js 13 App目录的SSR逻辑依赖Server Components或Server Actions，这两种方式都能直接访问请求头里的Cookie，无需依赖第三方包（react-cookie、cookies-next这类包更适配旧版Pages目录或客户端操作场景）。

方案一：Server Component直接处理（推荐） #

Server Components默认在服务端执行，可直接通过next/headers提供的cookies()函数获取Cookie，随后调用API获取用户信息。

代码示例 #

// app/user/page.js（默认即为Server Component）
import { cookies } from 'next/headers';

async function getUserInfo() {
  const cookieStore = cookies();
  const token = cookieStore.get('auth_token')?.value; // 替换为你的Cookie键名

  if (!token) return null;

  try {
    const res = await fetch('https://your-api-domain.com/user/info', {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      cache: 'no-store', // 禁用缓存，确保每次请求获取最新数据
    });

    if (!res.ok) throw new Error('Failed to fetch user info');
    return await res.json();
  } catch (err) {
    console.error('API调用错误:', err);
    return null;
  }
}

export default async function UserPage() {
  const user = await getUserInfo();

  return (
    <div>
      {user ? (
        <div>
          <h2>欢迎，{user.name}</h2>
          <p>邮箱：{user.email}</p>
        </div>
      ) : (
        <p>请先登录</p>
      )}
    </div>
  );
}

方案二：Client Component结合Server Action #

如果需要在Client Component中触发用户信息获取（比如交互场景），可通过Server Action封装Cookie读取与API调用逻辑（Server Action在服务端执行，可正常访问Cookie）。

代码示例 #

1. 定义Server Action（需添加'use server'指令）：

// app/actions/userActions.js
'use server';

import { cookies } from 'next/headers';

export async function fetchUserInfo() {
  const cookieStore = cookies();
  const token = cookieStore.get('auth_token')?.value;

  if (!token) return { error: '未登录' };

  try {
    const res = await fetch('https://your-api-domain.com/user/info', {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      cache: 'no-store',
    });

    if (!res.ok) return { error: '获取用户信息失败' };
    return { data: await res.json() };
  } catch (err) {
    return { error: '网络错误' };
  }
}

2. 在Client Component中调用：

// app/user/ClientUser.js（添加'use client'标记为Client Component）
'use client';

import { useEffect, useState } from 'react';
import { fetchUserInfo } from '../actions/userActions';

export default function ClientUser() {
  const [user, setUser] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    const getUser = async () => {
      const result = await fetchUserInfo();
      result.data ? setUser(result.data) : setError(result.error);
    };
    getUser();
  }, []);

  return (
    <div>
      {user ? (
        <div>
          <h2>欢迎，{user.name}</h2>
          <p>邮箱：{user.email}</p>
        </div>
      ) : error ? (
        <p>{error}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

关键注意事项 #

• 确保token存储在HttpOnly Cookie中，且Cookie的path、domain配置正确，保证服务端能接收到。
• Server Component中禁止使用客户端API（如window、localStorage），这是服务端执行的正常限制。
• 无需额外安装第三方Cookie处理包，Next.js自带的next/headers模块完全满足服务端Cookie读取需求。

内容的提问来源于stack exchange，提问作者Mir Tanvir Ahmed