Nextjs（应用程序）路由器在 nginx 反向代理后面不工作

路由器在 nginx 反向代理后面不工作"/>

Nextjs（应用程序）路由器在 nginx 反向代理后面不工作

我无法理解我的 Next.js (13.2.4) 应用程序在本地的行为与部署在我的服务器上运行在 niginx 反向代理之后的行为之间的区别。

我有一个具有以下结构的 nextjs 应用程序（使用应用程序路由器）

/app
 - page.tsx
 - /overviewPage
    - page.tsx

在开发模式下本地工作时 (

npm run dev

) 我在 localhost:3000 上看到 app/page.tsx 的内容，在 localhost:3000/overviewPage 上看到 app/overview/page.tsx 的内容。此路由器从 page.tsx 推送到 overviewPage.tsx 也工作正常：

// /app/page.tsx component
<CardActions>
    <Button size="small">Trading</Button>
    <Button size="small"onClick={() => { router.push("/overviewPage") }}>
    Historical Data</Button>
</CardActions>

据我所知，映射是：

1. app/page.tsx --> localhost:3000
2. app/overviewPage/page.tsx --> localhost:3000/overviewPage

当我在我的服务器上运行此应用程序时，docker 映射到主机的端口 8001，反向代理 (nginx) 的位置配置如下：

        location /_next/static {
                add_header Cache-Control "public, max-age=3600, immutable";
                proxy_pass http://127.0.0.1:8001/_next/static;
        }

        location /my/frontend {
                proxy_pass http://127.0.0.1:8001/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

我 能够通过 . 访问 app/page.tsx 的内容

所以我希望像本地一样的映射行为：

1. app/page.tsx -->
2. app/overviewPage/page.tsx --> *

但是 我无法通过 访问 overviewPage/page.tsx 内容。此外，router.push 函数似乎忽略了前端位置的路径段，并尝试调用 当然找不到。

进一步调查显示以下行为，我也不明白：

当将

router.push()

函数的路径参数更改为 "/my/frontend/overviewPage" 时，它会在 locally 中正确解析为 localhost:3000**/my/frontend/overviewPage** （没有找到任何东西，因为本地没有“/my/frontend/”位置）。但是在反向代理后面的服务器上，这个更改后的路径参数仍然尝试连接到 /**overviewPage** 完全忽略“/my/frontend/”路径段。

有人可以解释这种行为并帮助我找出如何以与本地工作相同的方式在我的服务器上获取预期的映射和工作路由器吗？

回答如下：