DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Breaking: Fast Refresh for .env files in Next.js 12.3
TusharShahi
TusharShahi

Posted on

Breaking: Fast Refresh for .env files in Next.js 12.3

Next.js 12.3 is out with a new set of improvements. A feature that will definitely save me a lot of time is Improved Fast Refresh

Anyone working with older versions of Next.js would have faced the inconvenience of restarting the server to reload updated environment variables from .env files.

Create React App also has the same problem. For any change in a file like .env.local, the app will not reload, neither the component will refresh. You have to manually restart the server.

This change from Next.js team is definitely welcome.

A Demo

Fast Refresh for environment variables

In Next.js, environment variables that have to be exposed to the browser should be prefixed with NEXT_PUBLIC_. Home component uses NEXT_PUBLIC_NAME and NEXT_PUBLIC_AGE. Changing NEXT_PUBLIC_NAME makes it reload. Unlike the previous versions of Next.js, I do not need to run npm run dev again here.

Fast Refresh vs Hot Reload

There are subtle differences between Fast Refresh and Hot Reload. Hot Reload generally reloads the whole app on change of a file.
Fast Refresh only reloads the file that is changed. If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file, and re-render your component. Read up more here

Similarly if an environment variable is changing, only files containing these environment variable will fast refresh.

Fast Refresh only reloading the changed component

In the above demo, the footer is accessing an environment variable NEXT_PUBLIC_NAME. The component has an alert statement too.

Notice how the alert is only triggered when the NEXT_PUBLIC_NAME changes and not when NEXT_PUBLIC_AGE changes. This proves that a component will only reload when .env variables relevant to it will change.

Summary

I think this feature was much needed and will definitely fasten up the development process and make it more enjoyable. What is your favourite feature from Next.js 12.3? Let me know in the comments

Top comments (0)

πŸ‘‹ Every week new members join DEV and share a bit about them in our Welcome Thread

Welcome them to DEV and share a bit about yourself