无法隐藏Next.js内置Toast错误提示的问题求助

1. 修正CSS拼写错误 #

先解决最基础的问题：你之前在globals.css里把display拼写成了diplay，这会导致样式完全不生效，哪怕加了!important也没用。先把拼写纠正过来，示例代码：

/* 替换错误的diplay为正确的display */
.target-toast-class {
  display: none !important;
}

2. 精准定位目标Toast，避免影响其他弹窗 #

直接隐藏nextjs-portal会覆盖所有通过Portal渲染的弹窗，不合理。你需要通过元素审查找到左下角Toast的专属类名或属性（比如带有next-dev-toast--bottom-left这类标识），针对特定选择器写样式：

/* 示例：假设目标Toast的类是next-dev-toast--bottom-left */
.next-dev-toast--bottom-left {
  display: none !important;
  /* 若需要保留占位空间，可替换为visibility: hidden !important; */
}

如果类名动态生成，也可以结合属性选择器定位：

/* 示例：定位左下角的alert类型Toast */
div[data-position="bottom-left"][role="alert"] {
  display: none !important;
}

3. 通过Next.js配置关闭开发环境错误提示 #

如果是开发环境的默认错误提示，可通过next.config.js直接禁用：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 禁用开发环境的构建活动提示（包括左下角Toast）
  devIndicators: {
    buildActivity: false,
  },
  // 也可以直接关闭所有开发环境提示
  // devIndicators: false,
}

module.exports = nextConfig

4. 自定义错误边界（生产环境适配） #

如果是生产环境的错误Toast，可用React错误边界组件捕获错误，完全替代默认提示逻辑：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可在此处添加错误日志上报逻辑
    console.error("Error caught:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 返回空组件或自定义错误提示，替代默认Toast
      return null;
    }
    return this.props.children;
  }
}

// 在_app.js中全局使用
export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  );
}

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