未捕获的错误：补水时出现错误。因为错误发生在 Suspense 边界之外.. NEXT JS

Question

当前正在使用 NEXT JS，如下所示 package.json

{
  "name": "mass_fe",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:production": "npm run build && npm run start",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@amcharts/amcharts5": "^5.6.2",
    "@ant-design/cssinjs": "^1.17.0",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "20.5.9",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "antd": "^5.11.1",
    "antd-img-crop": "^4.21.0",
    "autoprefixer": "10.4.15",
    "axios": "^1.5.1",
    "clsx": "^2.0.0",
    "cookies-next": "^4.2.1",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.10",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "express": "^4.19.2",
    "html2canvas": "^1.4.1",
    "http-proxy-middleware": "^3.0.0",
    "immer": "^10.0.3",
    "moment": "^2.29.4",
    "next": "13.4.19",
    "next-auth": "^4.23.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.11.0",
    "react-pdf": "^9.1.0",
    "react-quill": "^2.0.0",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1",
    "redux-saga": "^1.2.3",
    "sass": "^1.77.8",
    "tailwindcss": "3.3.3",
    "tar": "^7.4.0",
    "terser-webpack-plugin": "^5.3.10",
    "typescript": "5.2.2",
    "xlsx": "^0.18.5",
    "zustand": "^4.4.6"
  },
  "devDependencies": {
    "@types/crypto-js": "^4.2.2",
    "@types/js-cookie": "^3.0.3"
  }
}

和负载均衡器 nginx 像这样

    upstream nextjs_servers {
        # Server Next.js yang akan menangani permintaan
        server localhost:80;
        server localhost:90;
    }

    server {
        listen 100;
        server_name localhost;

        # Akses Next.js
        location / {
            proxy_pass http://nextjs_servers;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            
            # WebSocket support (optional, useful for hot reloading or real-time features)
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_cache_bypass $http_upgrade;

            # Buffer settings
            proxy_buffer_size 2048k;
            proxy_buffers 6 1000k;
            proxy_busy_buffers_size 2048k;
            proxy_temp_file_write_size 2048k;

            # CORS & Security Headers (optional)
            add_header X-Content-Type-Options "nosniff" always;
            add_header X-Frame-Options "SAMEORIGIN" always;
            add_header X-XSS-Protection "1; mode=block" always;
            add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
        }
    }

当我从不同的端口构建 2 个项目（同一项目），并尝试访问 localhost:100（我配置负载均衡器 Nginx 的位置）时，总是显示应用程序错误。

我尝试 npm run dev 两个端口来查看错误来自哪里，但什么也没找到，但是当我构建两个端口时，错误开始再次出现。我搜索过类似的每个错误，但另一个与错误放置的 html 有关。

Answer 1

你的项目中需要有这样的东西。

 const AppRouter = () => {
  return (
      <Suspense fallback={<Preloader />}>
        <Routes>
      </Suspense>