5

I have recently upgraded from now v1 to v2.

Everything works locally with now dev and all pages reload without any problems. However when I push to prod with now --prod and navigate to a page everything works as expected, however if I reload the page I will take to the error page with an error of 404

I must admit i am finding the lines a little blurry on how I should setup my project since the move to v2. I am so sure its to do with my routing... but I always thought it took the routes directly from my folder structure?

To add to the confusion, if you reload, you will get a 404, however from that 404 error page, if you use the navigation the site will render without any problems.

According to the Docs, it should pick up the name from the filesystem, which i believe it does, as it navigates there initially.

By default, routing is defined by the filesystem of your deployment. For example, if a user makes a request to /123.png, and your now.json file does not contain any routes with a valid src matching that path, it will fallback to the filesystem and serve /123.png if it exists.

now.json

{
  "version": 2,
  "builds": [
    { "src": "next.config.js", "use": "@now/next" }
  ],
}

Folder structure

enter image description here

next.config.json

const webpack = require('webpack')
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: (config, {}) => {
    const originalEntry = config.entry

    config.entry = async () => {
      const entries = await originalEntry()

      if (entries['main.js'] && !entries['main.js'].includes('./polyfills.js')) {
        entries['main.js'].unshift('./polyfills.js')
      }

      return entries
    }
    return config
  },
  env: {
    env: process.env.NODE_ENV,
  },
})

But yes, I am stuck and would be eternally grateful for some help :)

Package.json

I am unsure if this is helpful to know for the problem, but here is my scripts.

  "scripts": {
    "build": "next build",
    "dev:inspect": "NODE_ENV=development nodemon --inspect server.js",
    "start": "now dev",
    "test": "echo \"Error: no test specified\" && exit 0",
    "lint-scripts": "eslint './{Frontend/**,test/**,config/**,.}/*.js'",
    "lint-styles": "stylelint './Frontend/**/*.css'",
    "eslint": "eslint . --fix",
    "lint": "npm run lint-scripts && npm run lint-styles",
    "commit": "npx git-cz"
  },

[Edit]

  "routes": [
    {"src": "/index", "dest": "/" },
    {"src": "/charts", "dest": "/charts" }
  ]
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • One thing I can think of is that you are missing your Routes declaration in your now.json file. In Now V2, you need to declare your routes in the config if you wanna utilise the Serverless-inclined nature of now V2. That could be one reason why you are getting a 404 on your server render and an all working page on your front-end handled redirects. – Edrian Nov 07 '19 at 02:32
  • Thanks @Edrian I have added the routes config into `now.json`, it seems that no other routes work, so it appears it is all or nothing. According to the docs it will use the filesystem if it is not defined in the `now.json`. Interesting indeed. – Jamie Hutber Nov 07 '19 at 08:34
  • Yeah. I feel you bro. I thought I just have to put the pages in the `pages` folder too and it should work. As it turns out, you need to add them to the config to replace the express server. It looks like the folder structure routing is for Next.js, and the route config is for Now to route your Next.js application properly for each page's Lambda function. (Each page is hosted on a separate lambda function) – Edrian Nov 07 '19 at 08:45
  • oooommggggg lol That seems very much like its not what I would like to do. But I guess it gives us move control. and its `"src: "/charts"` not `src: "src/pages/charts`? I guess I will play with it now :) – Jamie Hutber Nov 07 '19 at 08:47
  • 1
    Nah man `"src": "/charts"` should work. But for what its worth, our application flew like a jet when we upgraded to Now 2. It is now wayyyyyyy faster and the static resources are more optimized as well. The benefits outweigh the hurt and pain the upgrade gave us. lol – Edrian Nov 07 '19 at 08:51
  • Alright man, I keep the faith! lol But the routes didn't help. I'll update the question though with the routes I have used – Jamie Hutber Nov 07 '19 at 08:58
  • Oh right. You on your next.config.js, you should put `target:serverless`. Like so: module.exports = withCSS({ target: 'serverless', webpack: (config, {}) => { const originalEntry = config.entry config.entry = async () => { const entries = await originalEntry() if (entries['main.js'] && !entries['main.js'].includes('./polyfills.js')) { entries['main.js'].unshift('./polyfills.js') } return entries } return config }, env: { env: process.env.NODE_ENV, }, }) – Edrian Nov 07 '19 at 09:01
  • Another thing is you have to do the build not on the next.config.js but on your package.json. So: `{ "src": "package.json", "use": "@now/next" }` – Edrian Nov 07 '19 at 09:03
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/201997/discussion-between-jamie-hutber-and-edrian). – Jamie Hutber Nov 07 '19 at 09:58

1 Answers1

3

Make a vercel.json and paste the redirect rules code. Save the file in your root directory, then redeploy.

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}
Ru Ru
  • 31
  • 2