使用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 ...任何内容...
如何正确执行?
非常感谢!
需要说明的是,我首先要说的是,我不认为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
代理上的重定向到/xyz
您的NextJS服务器上。
您需要代理/_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
道具。你不希望改变href
道具本身(因为它的链接是),只有as
道具(因为它的链接出现)。
最后,对于/static
资产,您只需要重写NextJS应用程序内的静态链接,即可
<img src='/static/mylogo.svg' />
至
<img src=`${PROXY_PATH}/static/mylogo.svg` />
并且在代理端重写的路径应正确处理它。这样,您可以PROXY_PATH
在项目范围内的单独配置文件中定义或从环境变量中加载它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句