Question

我尝试从Next.js构建静态文件，但我想把它放在共享主机的子文件夹或localhost / nextweb这样的localhost中。

我试图找到一些例子，但我发现只将NextJS放在root中。

我的next.config.js看起来像

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { ANALYZE } = process.env
module.exports = {
  webpack: function (config) {
    if (ANALYZE) {
      config.plugins.push(new BundleAnalyzerPlugin({
        analyzerMode: 'server',
        analyzerPort: 8888,
        openAnalyzer: true
      }))
    }

    return config
  },
  exportPathMap: () => ({
    "/": { page: "/" },
    "/about": { page: "/about" }
  }),
  assetPrefix: 'http://localhost/nextweb/'
}

当我打开某个页面时，它正在运行，但当我点击链接时，它会向我显示网络请求错误：

http://localhost/nextweb/_next/a5126d9c-d338-4eee-86ff-f4e6e7dbafa6/page/nextweb/about/index.js 404找不到。

但真实文件包含在 ... / page / about / index.js 而非 /page/nextweb/about/index.js

我该怎么办？

Answer 1

<块引用>

要在域的子路径下部署 Next.js 应用程序，您可以使用 basePath 配置选项。
basePath 允许您为应用程序设置路径前缀。例如，要使用 /docs 而不是 /（默认），打开 next.config.js 并添加 basePath 配置：

module.exports = {
  basePath: '/docs',
}

来源：Base Path

Answer 2

 location /SUBPATHNAME/_next/ {
      alias /PROJECTROOT/.next/;
      autoindex on;
      expires 30d;
      access_log on;
      location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires max;
        log_not_found off;
      }
    }
    location /SUBPATH/ {
      rewrite ^/SUBPATH(/.*)$ $1 break;
      proxy_pass http://localhost:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
    }

所以接下来发生的事情是尝试在根目录中查找媒体和静态文件，因此您需要明确提供nginx将抓住这些媒体文件的位置

也在node.config.js中

 const isProd = process.env.NODE_ENV === 'production'
 module.exports= ({assetPrefix: isProd ? 'https://srt-i.com/spa' : ''})

注意：上面的代码块可能并未真正优化，这是我想出的，您可以根据您的用例进行更改

Answer 3

不是本机的。暂时不在（仍在2019年）。这是相关的线程：

https://github.com/vercel/next.js/issues/4998

作品中具有实验性功能：

https://github.com/vercel/next.js/pull/9872

我可以将NextJS放在像localhost / next这样的子文件夹中吗？

3 个答案: