Next.js version 9.4 offers an all-new hot reloading experience with its Fast Refresh feature that responds immediately towards your edits in your React components.
What was missing?
We all know how hot reloading facilitates and improves your development workflow and that is why it was a crucial feature for Next.js. But the old hot-reloading experience was designed to reset the entire state of your application. Moreover, the previous implementation was not robust enough to handle runtime errors. Instead, your application would have to go through a complete reload even if you’ve made a simple typo error while editing your CSS or JavaScript.
What is Fast Refresh?
The hot reloading experience with Fast Refresh has a consolidated implementation with React. Now your Next.js application will only update its code in the file you edited, and only re-render that component, without losing component state.
In addition, the Next.js team has also redesigned the error handling procedure. Changes include:
- Click-to-open code with an error right in your editor.
- Resumption of your development session after you fix a syntax error.
- Automatic dismissal of unhandled runtime errors when you fix the error.
- Errors can now be located more precisely to the original line and column of your code.
It is enabled as default; all you need to do is upgrade your Next.js dev-workflow to version 9.4 and you are good to go. So, what are you waiting for? If you have built Next.js applications or planning to use it in the near future get started and enjoy this amazing and super fast hot-reloading experience.
Share your feedback in the comments section below. You can also reach out to me through my Twitter profile. My Twitter handle is @MaedahBatool.