Node.js 具有不同路径的代理下的Next.js

使用next.js版本

8.0.3

我不知道如何在具有不同子路径的代理下为自定义服务器提供服务

我正在做：

npm运行构建和npm启动

以构建和打开自定义服务器

我使用的不是open，而是带有另一个子路径的代理

代理很简单，要复制它：

proxy.js

const express = require('express')
const proxy = require('http-proxy-middleware')

const options = {
  target:'http://localhost:3000/',
}
const exampleProxy = proxy(options)
const app = express()

app.use('/example', exampleProxy)
app.listen(8000)

然后：

node proxy.js

但是，当我打开url时，它正在加载主页，但没有样式、静态、javascript。。。任何事

我怎样才能正确地做呢

---

非常感谢你

作为一个警告，我首先要说的是，我不相信NextJS在代理方面做得很好，尤其是在子路径上

话虽如此，但以下措施应具有局限性：

const express=require（'express'））
const proxy=require（'http-proxy-middleware'）
常量选项={
目标：'http://localhost:3000/',
路径重写：{
“^/示例”：”
}
}
const exampleProxy=代理（选项）
const app=express（）
app.use（['/example'，'/_next'，'/static']，exampleProxy）
app.listen（8000）

pathRewrite选项确保代理服务器上的

/example/xyz

重定向到NextJS服务器上的

/xyz

您需要代理

/\u next

（或您将构建目录重命名为的任何内容），以便页面找到所有构建的资产（脚本、样式表、网页包块等）。如果您检查Next的任何项目页面，您将看到这些资产链接是绝对的，因此也需要代理该目录

出于同样的原因，您需要代理

/static

，除了该目录用于存放静态NextJS资产（图像等）

您还会注意到，下一步中的页面链接通常也是绝对链接（我知道我的所有项目中都有我的链接）

所有这些都是我认为NextJS不适合使用子路径代理的原因

更新：

您可以在NextJS项目根目录下的

next.config.js

文件中添加以下配置：

module.exports={
assetPrefix:“/example”
}

这会将

/example

前置到所有构建的资产，因此您将链接到

/example/\u next/pages/xyz

而不是

/example/\u next/pages/xyz

。通过此更新，您可以删除代理端的

/\u next

代理，您的可构建资产（脚本、样式表等）仍应加载

关于NextJS应用程序中的导航（即“页面”）链接，如我在评论中所述，您可以设置自己版本的

链接

，并在子路径前面加上前缀：

从“下一个/链接”导入链接
//对于代理服务器
const PROXY_PATH='/example'
//对于非代理服务器
//常量代理路径=“”
导出默认MyLink=（{as，children，…props}）=>{children}

您必须确保所有

MyLink

组件都将

定义为
道具。您不想更改
href
道具本身（链接原样），只想更改
道具（链接原样）

最后，对于
/static
资产，您只需在NextJS应用程序中重写静态链接，即



到



代理端的路径重写应该能够正确处理它。
有了它，您可以在单独的配置文件中在项目范围内定义
代理路径
，或者从环境变量加载它。
非常感谢您的回答！但是，我想这不是我想要的解决方案：（…基本上有两个原因：（1）代理的想法是让不同的项目在不同的子路径上运行，我们可能会有冲突的路由路径，如
/static
。（2）您的解决方案可以很好地使用静态文件加载页面，但是，使用next.js导航是从
/
开始的，而不是从
/example
开始的。我希望解决方案只涉及next.js部分，而不是代理部分。这不可能吗？：O无论如何，非常感谢您！我非常感谢您的努力。@AralRoca我完全取消了rstand。正如我在开场白中所说，我认为NextJS不能很好地使用子路径代理。但是，您可以做一件事，那就是创建自己的
MyLink
组件（继承自Next的
链接
）并且在所有链接的子路径前加前缀。但是你仍然需要处理
/static
和构建目录…@AralRoca我已经在下一个js端用一个额外的配置更新了我的答案，这将有助于构建目录和页面链接，但是
/static
资产目录仍然是一个问题。也许它可以在NextJS端是否可以使用自定义服务器路由进行处理？@AralRoca请参阅我的最新更新，以了解
/static
资产目录的可能（且简单）解决方案