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

Question

使用next.js版本8.0.3我不知道如何在具有不同子路径的代理下提供自定义服务器。

我正在做：

npm run build && npm start

为了构建和打开自定义服务器。

而不是打开http：// localhost：3000 ，我使用代理与另一个子路径http：// localhost：8000 / example 。

代理很简单，重现它：

的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

但是，当我打开http：// localhost：8000 / example url正在加载主页但没有样式，静态，javascript ......任何东西......

我该怎么做才能正确？

非常感谢！

Answer 1

作为一个警告，我首先要说的是我不相信NextJS对代理很好，特别是在子路径上。

话虽如此，以下应该有效，但有限制：

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

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

app.use(['/example', '/_next', '/static'], exampleProxy)
app.listen(8000)

pathRewrite选项确保代理上的/example/xyz重定向到NextJS服务器上的/xyz 。

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

您需要代理/static出于同样的原因，除了该目录旨在保存您的静态NextJS资产（图像等）。

您还会注意到Next中的页面链接通常也是绝对的（我知道我的所有项目都是如此）。

以上所述就是为什么我说，在我看来，NextJS并不适合使用子路径代理。

更新：

您可以在添加下面的配置next.config.js文件在你NextJS项目的根目录：

module.exports = {
  assetPrefix: '/example'
}

这将预先准备/example所有内置的资产，所以不是/_next/pages/xyz你会链接到/example/_next/pages/xyz 。 通过此更新，您可以删除代理端的/_next代理，并且仍然可以加载可构建的资产（脚本，样式表等）。

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

import Link from 'next/link'

// for proxied server
const PROXY_PATH= '/example'
// for non-proxied server
// const PROXY_PATH= ''

export default MyLink = ({ as, children, ...props }) => <Link {...props} as={`${PROXY_PATH}${as}`}>{children}</Link>

您必须确保所有MyLink组件都定义as prop。 你不想改变href道具本身（的链接，因为它是 ），仅as道具（该链接为出现的话）。

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

<img src='/static/mylogo.svg' />

至

<img src=`${PROXY_PATH}/static/mylogo.svg` />

并且代理端上的路径重写应该正确处理它。 这样，您可以在单独的配置文件中在项目范围定义PROXY_PATH ，或者从环境变量加载它。