如何在Next.js应用中检测浏览器Cookie是否禁用？

1. 提前在全局层面检测Cookie状态，阻止依赖提前触发错误 #

你的useEffect检测逻辑是在客户端组件渲染阶段执行，但paho-mqtt、AWS Amplify这类依赖可能在模块导入、组件初始化时就尝试访问localStorage/Cookie，导致报错早于你的检测。可以在应用最入口提前做检测：

• 方案一：在_app.js顶部同步检测，提前拦截业务组件渲染

// _app.js 最顶部，组件定义外
let isCookieEnabled = true;
if (typeof window !== 'undefined') {
  try {
    // 用设置测试Cookie的方式替代navigator.cookieEnabled，兼容性更可靠
    document.cookie = 'test_cookie=1; path=/; SameSite=Lax';
    isCookieEnabled = document.cookie.includes('test_cookie=1');
    // 清理测试Cookie
    document.cookie = 'test_cookie=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
  } catch (e) {
    isCookieEnabled = false;
  }
}

function MyApp({ Component, pageProps }) {
  const [cookieEnabled, setCookieEnabled] = useState(isCookieEnabled);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(false);
  }, []);

  // Cookie禁用时直接显示提示，不渲染业务组件（避免加载依赖触发错误）
  if (!loading && !cookieEnabled) {
    return <div>请启用浏览器Cookie以正常使用本应用</div>;
  }

  return loading ? <div>加载中...</div> : <Component {...pageProps} />;
}

• 方案二：动态导入依赖相关组件，延迟加载时机
  把用到paho-mqtt、AWS Amplify的组件用Next.js的动态导入包裹，只有确认Cookie启用后才加载：

import dynamic from 'next/dynamic';

// 动态导入依赖组件，禁用SSR
const MqttRelatedComponent = dynamic(() => import('./MqttRelatedComponent'), {
  ssr: false,
  loading: () => <div>加载中...</div>,
});

function Page() {
  const [cookieEnabled, setCookieEnabled] = useState(true);

  useEffect(() => {
    try {
      document.cookie = 'test=1; path=/';
      setCookieEnabled(document.cookie.includes('test=1'));
      document.cookie = 'test=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
    } catch (e) {
      setCookieEnabled(false);
    }
  }, []);

  if (!cookieEnabled) {
    return <div>请启用浏览器Cookie</div>;
  }

  return <MqttRelatedComponent />;
}

2. 给依赖库添加错误捕获，避免全局崩溃 #

针对paho-mqtt和AWS Amplify，在初始化或调用它们的地方包裹try-catch，捕获存储访问错误：

• AWS Amplify初始化捕获

import { Amplify } from 'aws-amplify';
import config from '../aws-exports';

try {
  Amplify.configure(config);
} catch (e) {
  console.error('Amplify初始化失败：Cookie或存储已禁用');
  // 这里可以直接跳转提示页或设置禁用状态
}

• paho-mqtt客户端初始化捕获

import Paho from 'paho-mqtt';

function initMqttClient() {
  try {
    const client = new Paho.Client('mqtt.example.com', 8083, 'clientId');
    // 后续连接、订阅逻辑
  } catch (e) {
    console.error('MQTT客户端初始化失败：Cookie或存储已禁用');
    // 处理禁用提示逻辑
  }
}

3. 优化Cookie检测逻辑，提升兼容性 #

navigator.cookieEnabled在部分浏览器（比如Safari隐私模式）会返回不准确结果，改用设置测试Cookie的方式更可靠：

function checkCookieEnabled() {
  if (typeof window === 'undefined') return true; // SSR阶段默认返回启用
  try {
    const testKey = 'cookie_check';
    document.cookie = `${testKey}=1; path=/; SameSite=Lax`;
    const enabled = document.cookie.includes(`${testKey}=1`);
    // 清理测试Cookie
    document.cookie = `${testKey}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
    return enabled;
  } catch (e) {
    return false;
  }
}

4. 控制第三方脚本加载时机（若依赖是CDN引入） #

如果paho-mqtt是通过CDN脚本引入的，可在确认Cookie启用后再动态加载脚本：

useEffect(() => {
  if (cookieEnabled) {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/mqttws31.min.js';
    script.onload = () => {
      // 脚本加载完成后再初始化MQTT客户端
    };
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }
}, [cookieEnabled]);

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