Zeit Now 路由问题。 重新加载索引页以外的页面时出现 404 NOT FOUND

Question

最近我在 Themeforest 上购买了 Next.js 模板，并尝试将其部署到 Zeit Now。

这是一个使用 Lerna 和 Yarn 工作区的 monorepo。 Next.js 应用程序的代码位于packages/landing文件夹中

索引页面（位于/ route 的页面）一切正常，我可以毫无问题地重新加载它。

当我尝试在pages文件夹中添加新页面时出现问题。 例如/privacy-policy或/terms-of-service ，...

如果我通过索引页面中的<Link />导航这些页面，它工作正常。 但是，如果我尝试重新加载这些页面或向我的用户发送指向它们的直接链接，他们将无法访问这些页面。 相反，我的用户会看到 404 NOT FOUND。

您可以通过转到此页面https://superprops-2-r09pdhfab.now.sh/来了解我的意思。 重新加载时它工作正常。

但是如果你打开这个页面https://superprops-2-r09pdhfab.now.sh/saas ，你会看到404（ /saas的代码也部署了）

在我的本地主机开发中，重新加载时它适用于所有页面。 所以我认为问题出在 Zeit Now 配置上。

这是now.json的代码：

{
  "version": 2,
  "builds": [
    { "src": "packages/landing/package.json", "use": "@now/static-build" }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/packages/landing/$1",
      "headers": {
        "x-request-path": "$1"
      }
    }
  ]
}

如何解决这个问题？ 谢谢你。

Answer 1

事实证明，来自 Themeforest 的模板正在使用具有旧配置的 monorepo，该配置不再与 Now zero-config 兼容。

所以我的解决方案是创建一个新的 Next.js 项目，复制所有代码并更新 next.config.js 如下。

这部分config.resolve.modules.push(path.resolve('./')); 让我免于更改任何导入语句。

const path = require('path');
const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withFonts = require('next-fonts');
const withCSS = require('@zeit/next-css');
module.exports = withPlugins(
  [
    [
      withOptimizedImages,
      {
        mozjpeg: {
          quality: 90
        },
        webp: {
          preset: 'default',
          quality: 90
        }
      }
    ],
    withFonts,
    withCSS
  ],
  {
    webpack(config) {
      // Here is the magic
      // We push our config into the resolve.modules array
      config.resolve.modules.push(path.resolve('./'));
      return config;
    }
  }
);