Zero downtime deployment with Next.js

I have a Next.js application that I deploy by running

next build
next start

on the server.

While the build is happening, it clears out the files in the .next build folder, so for a few seconds if I try to use the app, it will give an error because the files don't exist:

MissingStaticPage [Error]: Failed to load static file for page: /reporting/letter_exhibits ENOENT: no such file or directory, open '/home/polson/projects/JRP-Web-Tools/.next/server/pages/reporting/letter_exhibits.html'

Once I wait for the build to finish, the web app works as expected.

Is there a way to change the build process so that there will be no downtime during the build?

You can use this simple strategy, although it won't guarantee "zero" downtime, but it would be much better than the current experience. Basically, you build your project into a temp folder, and then delete existing .next folder, and rename your temp folder as .next.

1. Add this to your next.config.js file:

distDir: process.env.BUILD_DIR || '.next',

2. Create a script with the following contents:

echo "Deployment starting..."

# install dependencies if any
yarn || exit

# set build folder to `temp` and build
BUILD_DIR=temp yarn build || exit

if [ ! -d "temp" ]; then
  echo '\033[31m temp directory does not exist!\033[0m'  
  exit 1;
fi

# delete `.next` folder
rm -rf .next

# rename `temp` folder to `.next`
mv temp .next

# run next start
next start

echo "Deployment done."

You should probably use a process manager like pm2 for deployments though.