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
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.
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)