我可以将 NextJS 放在 localhost/next 之类的子文件夹中吗？

IT技术 reactjs next.js
2021-05-19 18:40:48

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

我试图找到一些例子，但我发现只将 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

我该怎么办？

3个回答

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

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

来源：基本路径

 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://myproduction' : ''})

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

不是原生的。目前还没有（仍然在 2019 年）。这是相关的线程：

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

作品中有一个实验性特征：

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

其它你可能感兴趣的问题
上一篇React - 将props传递给孩子 onClick 下一篇更改 Navigator.NavigationBar（标题）的默认样式