The NextJS framework is based on React. The application can be customized to be used on various platforms, including Windows, Linux, and Mac. Linking dynamic paths to NextJS components allows them to be rendered conditionally. Most edits will appear within a second when Next.js Fast Refresh is enabled.
This also works with the Nx integration and Next.js. This approach refreshes the browser and reloads the component, so the current state should not be lost.
What is Fast Refresh?
The Fast Refresh feature gives you immediate feedback on changes made to React components when they are reloaded. The default setting will be enabled in every Next.js project released after version 9.4.
The page is automatically refreshed whenever a markdown (MDX) element changes. The Multidimensional Expressions(MDX) markdown format allows you to include JSX in your markdown content.
The same is true for Next.js. However, we need additional support for MDX files.MDX makes it possible to Embedded components, such as interactive charts or alerts. This makes the writing process very straightforward.
How does Fast Reliable/Hot Reloading work?
Suppose when you edit a file that exports only React components, Hot Reloading will only update the code for that file, and then it will re-render your component. It is possible to edit anything in that file, including styles, rendering logic, event handlers, and effects.
You have done some changes to the file, now what will happen?
Each time you change a component in Next.js, you'll see a small Vercel logo appear on the lower right corner of the open browser window which represents that it is refreshing the changes made in the file.
The updated information is then displayed on the browser.
Fast Reloading without changing the state
Using Fast Refresh and hooks aims to preserve the component's state as you edit it. As long as you do not change the arguments to use form or useRef or the order of the Hook calls, they maintain their previous values.
Consider this example below in which we have written some code in the index.js file.
In this, when the user clicks on the add, the value will get updated by 1, and if the user clicks on the subtract, the value decreases by 1.
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useState } from "react";
export default function Home() {
const [currentValue, setValue] = useState(0);
const ADD = () => setValue(currentValue + 1);
const SUBTRACT = () => setValue(currentValue - 1);
return (
<div className={styles.container}>
<Head>
<title> Create Next App </title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>Welcome to Next.js.</h1>
<p className={styles.description}>
see how fast reloading works <code className={styles.code}> With this example. </code>
</p>
<p> Click the two buttons to add or subtract from the current value </p>
<div className={styles.grid}>
<h2 className={styles.card} onClick={ADD}>
{" "}
ADD{" "}
</h2>
<h2 className={styles.card}> {currentValue} </h2>
<h2 className={styles.card} onClick={SUBTRACT}>
{" "}
SUBTRACT{" "}
</h2>
</div>
</main>
<footer className={styles.footer}>
<a href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer">
Powered by{" "}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>{" "}
</a>
</footer>
</div>
);
}
Output:
Now, if we do some changes by writing 'Removing Welcome to Next.js' text, it will not change the currentValue '5'.
<main className={styles.main}>
<h1 className={styles.title}>
Removing Welcome to Next.js
</h1>
Output:
The file can be regenerated if a syntax error is made during development. Because the error will automatically disappear, there is no need to reload the app. Your component state will remain intact. That is how fast Reloading happens without changing the state.
While working with Fast refresh, there are a few things to keep in mind:
Fast refresh only renders the components from a file if it exports React components
It reruns that file and all the other ones that import it, even if the file doesn't export a React component.
How can we check runtime errors?
You'll see a contextual overlay when you make a mistake in your component, leading to a runtime error. If the error is fixed, the overlay will be dismissed automatically without reloading the app.
Those component states which were not affected by the error will be retained. The React application will remount using the updated code if the error occurred during rendering.
After a rendering error, your app will retry rendering after having error boundaries (which is a good idea for production). As a result, you won't always get reset to the root app state if you have an error boundary. Keep in mind that error boundaries should not be too precise. They are used by React for production and should be carefully designed.
Nodemon
You will find that if you run nodemon without a configuration or the proper CLI parameters, your server will act strange. Due to detecting changes every time NextJS was compiled, my server started restarting infinitely.
How can we fix this?
Nodemon allows you to configure the process in advance with a configuration file. We can fix all our problems by adding a few values to this file.
Step-1: Install nodemon
npm install --save-dev nodemon
Step-2: Add the following code to a config file, i.e. nodemon.json, in the root folder:
By using this command, nodemon ignores the .next folder, which serves as a cache for the Next compiler (and triggers an endless reload). You can also specify which file to watch for changes. You can have separate files and folders for routes/middleware/etc. And also, keep the server file in a different server folder.
Step-3: Using nodemon instead of the default node server.js in your npm dev script requires updating package.json and the 'dev' script value, which is written below:
After running npm run dev, your hot-reloading server will now be up for running.
Frequently Asked Questions
How do I make the next JS faster?
Using dynamic imports, a technique also known as code-splitting, is one of the most effective ways to keep Next.js client-side bundles small. Lazy loading of application code or dependencies enables an application to load when necessary based on each user's journey.
Why is hot reloading not working in React?
It may happen because of an issue with your file system, file extensions, or the webpack/project configuration default for Create-React-App. The hot-reloading should work straight away, especially if the project is beginning. That is why you don't need to make any changes there.
What's the difference between live Reloading and hot Reloading?
Reloading your entire application is Live Reloading. Reloading your entire application is Live Reloading. It will take to reload the entire app after the file has been changed. Reloading the whole app does not trigger hot Reloading. This app fixes the code that has been changed and maintains the current state of your app.
Is it possible to replace a hot module?
In Hot Module Replacement (HMR), modules are exchanged, added, or removed while an application is running without requiring a full reload. Development can be accelerated in several ways by using this method: Retain application state, which would otherwise be lost during a full reload.
Conclusion
This article explains how Fast refresh works within the NextJS. With Fast Refresh, you can view instantaneous feedback about any changes you make to your React components.