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

咸罗卡

使用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.jsNextJS项目根目录的文件中添加以下配置

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

(Vue.js)具有不同路线的相同组件

Mongo查找在不同路径下具有特定值的给定字段的出现

如何测试具有 N 个不同路径的函数?

具有不同路径级别的XSLT测试

如何在Vue.js中对相同路径、不同查询参数使用router.push

Traefik + Docker反向代理-针对不同路径的不同Auth?

具有相同路径但具有不同@RequestParam值的多个端点

编译具有相同文件名但具有不同路径的源文件

在Angular 2中将路径转换为具有不同参数的相同路径

laravel中具有不同参数的不同路径到相同方法

webpack中的url-loader配置正在从React JS项目中的不同路径加载图像

重复使用具有不同路径值的SVG元素

Swagger 2.0:具有不同路径但请求和响应相同的多个Path对象

一个具有两种不同路径的网址(网址重写)

js:加载具有不同参数的相同js代码

使用Rails和Webpacker在不同路径下构建资产

不同路径下的多个socket.io实例

Node.js和Wordpress的Apache代理位于相同的“域”中,但路径不同

重定向到相同路径名但具有不同路由参数时,History.push不起作用

具有2个MATCH子句的查询有什么作用?与具有2个不同路径的单个MATCH子句的查询有什么不同?

Leaflet JS:具有自定义点的最快路径

对具有不同输出的不同路线使用相同的组件

Spring Boot-将GetMapping简化为具有不同路径的相同方法的简便方法

NGINX在具有不同路由路径的同一端口上运行多个应用程序

我可以使用具有相同路径和不同参数名称的多个get请求吗?

如何删除域下不同路径的所有cookie

具有更漂亮格式的Next.js

在Sentry上具有Typescript的Next.js源映射

Next js中具有多个参数的动态路由