Understanding the Icons Used by Next.js in Your App

Discover the meaning behind the icons generated by Next.js during development.

When working on a Next.js app, you may have noticed a small icon in the bottom right corner of the page that resembles a lightning bolt.

If you hover over the icon, you will see the message “Prerendered page”.

This icon is only visible in development mode and indicates that the page is eligible for automatic static optimization. Essentially, this means that the page does not rely on data that needs to be fetched at runtime. Instead, it can be prerendered and built as a static HTML file during the build process (when npm run build is executed).

Next.js determines whether a page qualifies for static optimization by checking for the absence of the getInitialProps() method attached to the page component.

By serving the page as a static HTML file, rather than generating it dynamically through the Node.js server, the page can achieve even faster load times.

Furthermore, you may also come across another helpful icon that can appear alongside or instead of the prerendered page icon on non-prerendered pages. This icon is a small animated triangle.

The compilation indicator appears when you save a page and Next.js starts compiling the application. It acts as a visual cue to alert you that the application is being compiled before hot code reloading takes effect to automatically reload the code.

This indicator is particularly useful as it allows you to quickly determine if the app has been compiled, enabling you to test the specific part you are working on without delay.

tags: [“Next.js”, “icons”, “development mode”, “static optimization”, “prerendered page”, “compilation indicator”, “hot code reloading”]