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

Question

最近我在 Themeforest 上买了一个 Next.js 模板，我试图将它部署到 Zeit Now。

这是一个使用 Lerna 和 Yarn workspace 的 monorepo。 Next.js 应用程序的代码在 packages/landing 文件夹中

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

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

如果我从索引页面通过 <Link /> 浏览这些页面，它工作正常。但是，如果我尝试重新加载这些页面或将我的用户直接 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/",
      "headers": {
        "x-request-path": ""
      }
    }
  ]
}

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

Answer 1

事实证明，Themeforest 中的模板使用的是旧配置的 monorepo，它不再与 Now 零配置兼容。

所以我的解决方案是创建一个新的 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;
    }
  }
);

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

Zeit Now routing problem. 404 NOT FOUND when reloading pages other than index page

javascript

reactjs

next.js

vercel