#deployment

Problem

I almost always have problems building my Next.js app locally (which almost always means I’ll have problems deploying it). Sometimes you just need to temporarily delete all your /pages/ except your /pages/api/ routes.

If you are getting some kind of FetchError: invalid json response body, it means there is an error getting results from your API endpoint. If you Next app is trying to build a page before the entire deploy has completed, and that page requires a brand new API endpoint you just made, then you run into the problem where you can’t build your app because it needs to use an API endpoint that doesn’t exist on the web yet.

Solution

Whenever you add a new API route, you need to deploy the API route before you deploy the pages that use that route.

If you build your nifty page at the same time, you can just try deploying without any of my /pages/ routes in order to allow the deploy to complete with the API endpoints only. (You could also try only deleting the routes that utilize your new API endpoints, but I haven’t always had success with this approach.)

1. Push to master the final code you would like to see deployed.
2. Delete all your /pages/ routes except the /pages/api/ routes, and push this change to master (in most cases this will trigger a new deploy). If you are building locally, then run yarn build, next build, or whatever your build command is.
3. Revert your most recent commit where you deleted all those /pages/ routes, and push this to master.

This should result in your app successfully deploying, including the new API routes and all the routes that query those endpoints for server-side rendering.

If you have a live app people are relying on, you might want to do this at night! 🌙

Problem

I almost always have problems building my Next.js app locally (which almost always means I’ll have problems deploying it). Sometimes I just need to delete all my /pages/ except my /pages/api/ routes.

Sometimes, though, whatever I do, I just repeatedly hit this error:

> Build error occurred
Error: Export encountered errors on following paths:
...

Confusingly, when I retry building I end up with a different list of error-throwing paths virtually every time.

If you’re bashing your head against the wall trying to figure out why you’re encountering a build error, try this:

Start your local Next.js server using next start or yarn start or npm start (or whatever you use), and then navigate to all of the pages or paths giving you build problems.

Now try building again in another terminal window. In some cases simply building the pages on the fly locally through your development server allows the build to proceed.

Weird, right? (Yes, I know this makes sense to someone.)