Add Next.js to the icon in your application

Understand the meaning of the icons generated by Next.js in development mode

When using the Next.js application, do you see a small icon at the bottom right of the page that looks like a lightning bolt?

If you hover it over, it will display "Prerendered page":

This icon, this isOnly visible in development modeOf course, telling you that the page meets the conditions of automatic static optimization, which basically means that the page does not depend on the data that needs to be obtained at the time of the call, and it can be pre-rendered and built as a static HTML file at build time (when we runnpm run build).

You can pass the missinggetInitialProps()The method of attaching to the page component.

In this case, our page can even be faster because it will be served statically as an HTML file, rather than through a Node.js server that generates HTML output.

Another useful icon that may appear next to it, or instead of it on a non-priority page is an animated triangle:

This is a compile indicator. When you save the page and Next.js is compiling the application, the prompt will automatically appear before the hot code reloading starts to reload the code in the application.

This is a very good way to immediately determine whether the application has been compiled, and you can test the part of the application you are working on.

Download mine for freeNext.js manual

More tutorials next: