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

user_2667212 0
Viewed 1194

Recently I bought a Next.js template on Themeforest and I tried to deploy it to Zeit Now.

This is a monorepo that using Lerna and Yarn workspace. Code of the Next.js app is inside packages/landing folder

Everything is fine with the index page (the page at / route), I can reload it without any problem.

The problem arises when I tried to add a new page inside pages folder. For example /privacy-policy or /terms-of-service, ...

If I navigate the these pages through a <Link /> from the index page, it works fine. But if I tried to reload these pages or send my users a direct link to them, they can't access these pages. Instead, my users will see 404 NOT FOUND.

You can see what I mean by going to this page https://superprops-2-r09pdhfab.now.sh/. It works fine when reloading.

But if you open this page https://superprops-2-r09pdhfab.now.sh/saas, you will see 404 (the code for /saas is also deployed)

In my localhost development, it works fine for all pages when reloading. So I think that the problem is from Zeit Now configuration.

This is the code inside 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"
      }
    }
  ]
}

How to fix this? Thank you.

vercel next.js reactjs javascript
1 Answers

It turns out the template from Themeforest is using a monorepo with the old configuration that is not compatible with Now zero-config anymore.

So my solution is to create a new Next.js project, copy all code and update next.config.js as below.

This part config.resolve.modules.push(path.resolve('./')); saves me from changing any import statement.

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;
    }
  }
);
user_26672120
Related