我找到了使用NGINX反向代理具有基本路径的URL的解决方案。

有用的链接

• https://levelup.gitconnected.com/deploy-your-nextjs-application-on-a-different-base-path-ie-not-root-1c4d210cce8a
• https://www.docker.com/blog/tips-for-deploying-nginx-official-image-with-docker/

应用变更

依存关系

• next-images：为了在使用反向代理时从“ public”导入静态图像
• @ zeit / next-css：为了使用样式表文件
• 以及通常的NextJS依赖项

next.config.js

在应用程序的根目录中添加“ next.config.js”文件，以便您可以指定“ assetPrefix”和“
publicRuntimeConfig.basePath”

• assetPrefix：在访问组件，样式表，页面等时，由NextJS使用
• publicRuntimeConfig.basePath：在中使用，因此指定要添加到链接的前缀，在使用公共图像时在“”元素的“ src”标签中使用

例

const isProd = process.env.NODE_ENV === 'production'

// Enable importing of css stylesheets
const withCSS = require("@zeit/next-css");
const withImages = require('next-images');

/*
 * Gets the BASE_PATH from the command used to start this app.
 * If BASE_PATH is specified but it does not start with a "/" 
 * then add it. 
 */
function getBasePath() {
    var basePath = ''

    if (isProd && process.env.BASE_PATH){
        if (process.env.BASE_PATH.startsWith("/") ){
            basePath = process.env.BASE_PATH;
        } else {
            basePath = "/" + process.env.BASE_PATH;
        }
    }

    console.log("getBasePath() : isProd = " + isProd);
    console.log("getBasePath() : basePath = " + basePath);

    return basePath
}

module.exports = withCSS(withImages({
    assetPrefix: getBasePath() ,

    publicRuntimeConfig: {
        basePath: getBasePath() ,
    },

}));

静态影像

使用“ next-images”以导入图像并在src标签中引用导入的对象

更改对静态映像（在/ public文件夹中的静态映像）的任何引用以具有基本路径前缀。例如，我的“页脚”组件具有以下内容

import '../stylesheets/main.css';

import img1 from '../public/image_name1.png'
import img2 from '../public/image_name2.png'

export default class o extends React.Component {

    render(){
        var prefix = publicRuntimeConfig.basePath
        return  (
            <div >
                <a className="icon" href="http://www.image_name.com" >
                    <img src={img1} alt="image_name1"/>
                </a>
                <a className="icon" href="http://www.image_name2.com">
                    <img  src={img1} alt="image_name2"/>
                </a>
            </div>
        );
    }
}

注意：我尝试使用publicRuntimeConfig.basePath作为src URL的前缀（如下所示），但这在我部署的环境中不起作用（请参阅下文）

    import getConfig from 'next/config'
    const { publicRuntimeConfig } = getConfig()
    ...
    ...
    <a className="icon" href="http://www.image_name.com" >
        <img src={`${publicRuntimeConfig.basePath}/image_name1.png`} alt="image_name1"/>
    </a>

链接

更改您的链接以使用基本路径前缀，例如在我的“标题”组件中，我具有以下内容

import Link from 'next/link';
import '../stylesheets/main.css';

import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()

const detailId1 = "banana"

const Header = () => (
    <div>
        <div>
            <Link href={`${publicRuntimeConfig.basePath || ''}/`}>
                <a className="linkStyle">Home</a>
            </Link>

            <Link href={`${publicRuntimeConfig.basePath || ''}/about`} >
                <a className="linkStyle">About</a>
            </Link>

            <Link href={`${publicRuntimeConfig.basePath || ''}/details/[id]`} 
                  as= {`${publicRuntimeConfig.basePath || ''}/details/${detailId1}`} >
                <a className="linkStyle">Details Var 1</a>
            </Link>
        </div>
  </div>
);

export default Header;

注意：在博客 https://levelup.gitconnected.com/deploy-your-nextjs-application-on-a-
different-base-path-ie-not-
root-1c4d210cce8a中，该博客包含一个“
Link.tsx”会为您添加前缀，因此您只需使用该Link组件（从“ ./Link.tsx”导入Link；），而不是nextJS版本（从“ next /
link”导入Link；）。但是，当我的链接URL中有变量时，“ Link.tsx”对我不起作用。

运行您的nextjs应用

当您在本地运行应用程序时，您不需要基本路径就可以运行

npm run dev

由于未指定BASE_PATH，因此应可从“ http：// localhost：3000 ”
访问您的应用程序，并且src值应为“ /image_name1.png”，将鼠标悬停在s上时，您将看到链接为“ http：//本地主机：3000 /
pagename “

如果要使用基本路径运行，请执行以下操作

export BASE_PATH=a/b
npm run dev

注意：由于我的环境中的某些原因，如果我指定“ export BASE_PATH = / a /
b”（/在路径的开头），则会在该路径的开头添加一个文件夹目录。
因此，我在没有开始/的情况下指定了它，并且next.config.js中的代码在需要时添加了开始/。

您已经设置了基本路径/assetPrefix/publicRuntimeConfig.basePath，因此无法通过“ http：//
localhost：3000 ” 访问您的应用程序。现在您需要一个反向代理。

NGINX：反向代理

我发现最简单的设置是使用NGINX Docker映像。您需要使用包含重定向到NextJS应用程序的配置来运行NGINX。

创建一个文件夹，然后在该文件夹中添加一个“
default.conf”文件。确保在启动nextjs应用程序时，放置在“位置”中的路径是您为BASE_PATH指定的SAME路径。

server {
    listen 80;
    server_name  localhost;

    location /a/b/ {
        proxy_pass http://myhost:3000/;
    }       
}

重要笔记：

• 您必须在proxy_pass URL的末尾加上/，否则其他路径不会传递到NextJS应用程序中
• 如果您在该位置使用变量，则必须确保包括传递路径

例

location ~ /a/b/(.*)$ {  
    set $upstream http://myhost:3000/$1;
    proxy_pass $upstream;
}

在该目录的命令提示符下，运行NGINX docker映像，告诉它使用您的配置文件。

docker run --name mynginx1 -v C:/zNGINX/testnginx/conf:/etc/nginx/conf.d -p 80:80 -d nginx

• 泊坞窗容器的名称为“ mynginx1”
• v参数告诉它将计算机上“ C：/ zNGINX / testnginx / conf”中的所有文件复制到Docker容器中的“ /etc/nginx/conf.d”目录中。这会将您的“ default.conf”复制到Docker容器中，NGINX将读取该配置文件。
• 注意：请确保您在docker位置的路径中有“ conf.d”（“：/ etc / nginx / conf.d”），我读过的博客不包括此部分，它仅指定了“：/ etc / nginx /“，如果没有它，图像将不会启动。
• p参数告诉在端口80上运行NGINX

转到以下URL

http://localhost:80/a/b/

NGINX会将URL重定向到“ http：// localhost：3000
”。因此，现在应该可以从具有基本路径的URL访问您的应用程序。单击s应该可以工作，该链接应包含转到NGINX的基本路径，该路径将重定向回应用程序，剥离基本路径，并保留所有其他路径。

使用Docker进行真实世界服务器部署

如果要将应用程序部署到服务器（如本地运行一样），则可以构建应用程序，然后将相关文件/文件夹复制到服务器计算机上。在构建和运行应用程序时，请确保已设置BASE_PATH

export BASE_PATH=a/b
npm run build

cp package*.json [server_location]
cp next.config.js [server_location]
cp ./next [server_location]

然后在该服务器上运行

npm install
export BASE_PATH=a/b
npm run start

注意：如果您在应用程序中引用了“公共”图像，请使用“下一个图像”并导入图像，而不要使用publicRuntimeConfig.basePath作为前缀。
当我做后者时，没有找到图像。有关示例，请参阅关于图像的部分。