How To Enable Hot Reloading for .env Files in Next.js

One of the most annoying things while developing is when you change something in your code and do not get immediate feedback in your app. This is why Next.js 9.4 introduced what is called Fast Refresh.

“Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.” — Basic Features: Fast Refresh

However, the Fast Refresh feature may not work on all files. This is especially true when it comes to .env files. In detail, when you edit .env files, you typically have to restart your development server to see those changes.

If you are unfamiliar with that Next.js behavior, it can cause frustration and make you less productive. Fortunately, Next.js introduced a solution. No more wondering why your new environment variable is not being loaded by the Next.js app until you realize that you need to restart the development server.

Let’s find out more about how to enable the Fast Refresh feature on .env files.

Enabling the Next.js Fast Refresh Feature on .env Files

All you have to do to enable hot reloading for .env files is to update your Next.js dependency to version 12.3+. To achieve this, make sure to launch the following command:

npm install next@latest

This will install the latest Next.js version. At the time of writing, it is version 12.3.1. Any version greater than or equal to 12.3 will do. Remember that migrating from one version of Next.js to another may require extra work. Read this from the official documentation to learn more about it.

As stated here, Next.js 12.3 now supports hot reloading when making changes to configuration files, including:

• .env and env.* files
• jsconfig.json or tsconfig.json file

With Next.js 12.3, you no longer need to restart your local development server when making changes to those configuration files.

Now, change a Next.js environment file, hit save, and your changes will be reflected in the browser without reloading the page.

Et voilà! You just learned how to enable hot reloading for .env files in Next.js.

Conclusion

In this article, you learned how to enable hot loading of .env files on Next.js. Finally, Next.js has extended the Fast Refresh feature to configuration files.

So, by adopting a version of Next.js greater than or equal to 12.3, you will be able to get immediate feedback in your browser when you change configuration files — without having to restart the local development server or manually reload pages.

Thanks for reading! I hope you found this article helpful.