Zero downtime deployment with Next.js

Question

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?

Answer 1

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.