Next.js 13 App目录下如何检测函数调用来自Server/Client组件？

核心思路：利用Next.js的环境标识与模块特性 #

直接用typeof window不靠谱——Client Components在SSR阶段会在Node环境执行（此时window为undefined，会误判为Server环境），Server Components的构建逻辑也可能干扰检测结果。推荐以下几种可靠方案：

1. 用process.env.NEXT_RUNTIME（Next.js 13.4+） #

Next.js 13.4及以上版本会自动注入这个环境变量，直接通过它判断运行环境：

• Server组件/API路由：process.env.NEXT_RUNTIME === 'nodejs'
• Client组件：process.env.NEXT_RUNTIME === 'browser'

示例：Cookie读取逻辑封装 #

export function getAuthCookie() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    // Server环境：使用next/headers
    const { cookies } = require('next/headers');
    return cookies().get('auth_token')?.value;
  } else {
    // Client环境：使用cookies-next
    const { getCookie } = require('cookies-next');
    return getCookie('auth_token');
  }
}

2. 拆分环境模块+条件导入 #

把Server和Client的逻辑拆成独立模块，再通过运行时判断动态导入，避免不必要的依赖加载：

示例：Supabase客户端封装 #

// supabase-server.js（仅Server环境用）
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';

export function getSupabaseServer() {
  return createServerComponentClient({ cookies });
}

// supabase-client.js（仅Client环境用）
import { createBrowserClient } from '@supabase/auth-helpers-nextjs';

export function getSupabaseClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  );
}

// 统一入口函数
export async function getSupabase() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { getSupabaseServer } = await import('./supabase-server');
    return getSupabaseServer();
  } else {
    const { getSupabaseClient } = await import('./supabase-client');
    return getSupabaseClient();
  }
}

3. 显式传入环境标识（最直观） #

如果不想依赖环境变量，可在调用函数时从组件层面传入isServer参数，逻辑更清晰：

export function getCookie(name, isServer) {
  if (isServer) {
    const { cookies } = require('next/headers');
    return cookies().get(name)?.value;
  } else {
    const { getCookie } = require('cookies-next');
    return getCookie(name);
  }
}

// Server组件中调用
getCookie('auth_token', true);

// Client组件中调用
getCookie('auth_token', false);

内容的提问来源于stack exchange，提问作者Mohammed Yasin Mulla