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
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.
In Next.js, environment variables that have to be exposed to the browser should be prefixed with
Home component uses
NEXT_PUBLIC_NAME makes it reload. Unlike the previous versions of Next.js, I do not need to run
npm run dev again here.
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.
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